资讯专栏INFORMATION COLUMN

Canvas保存图片到七牛云

Carl / 2007人阅读

摘要:最近在做一个项目,需要在前端对图片切片并上传到七牛云技术要点可将保存成二进制文件将二进制文件添加到中上传数据到后端处理代码实现目前没有看到七牛云提供的支持上传到云上的,所以这里自己实现了一下注意到七牛云的时候不要设置,让浏览器自己处理请求

最近在做一个项目,需要在前端对图片切片并上传到七牛云

技术要点

canvas.toBlob(blob=>{}); //可将canvas保存成二进制文件

formData.append("file", blob, "filename"); //将二进制文件添加到FormData中

ajax.send(formData); //上传数据到后端处理

代码实现

目前没有看到七牛云提供的JSSDK支持上传blob到云上的, 所以这里自己实现了一下
注意ajax post formData到七牛云的时候不要设置content-type,让浏览器自己处理

class Qiniu {
  constructor(options = {}) {
    this._options = {...options};
  }

  ajax(url = "", opt = {}) {
    const options = {method: "GET", async: true, dataType: "JSON", ...opt};
    return new Promise((resolve, reject) => {
      const ajax = this.createAjax();
      if (ajax) {
        const _async = typeof options.async === "boolean" ? options.async : true;
        ajax.open(options.method || "GET", url, _async);
        if (options.headers) {
          Object.keys(options.headers).forEach(key => {
            ajax.setRequestHeader(key, options.headers[key]);
          });
        }
        ajax.onreadystatechange = () => {
          if (ajax.readyState === 4) {
            if (ajax.status >= 200 && ajax.status <= 400) {
              let res = ajax.responseText;
              if (options.dataType && options.dataType.toUpperCase() === "JSON") {
                res = JSON.parse(res);
              }
              resolve(res, ajax.response);
            } else {
              reject(new Error("请求失败:" + ajax.status))
            }
          }
        };
        ajax.send(options.data);
      } else {
        reject(new Error("创建Ajax请求失败!"));
      }
    });
  }

  createAjax() {
    let xmlhttp;
    if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
  }

  getToken() {
    if (this._options.token) {
      return Promise.resolve(this._options.token);
    } else {
      if (typeof this._options.getToken === "function") {
        const t = this._options.getToken();
        if (t && typeof  t.then === "function") {
          return t.then(token => {
            this._options.token = token;
            return token;
          })
        } else if (typeof t === "string") {
          this._options.token = t;
          return Promise.resolve(t);
        } else {
          return Promise.reject(new Error("options.getToken必须返回Promise或string token"));
        }
      } else if (typeof this._options.getTokenUrl === "string") {
        return this.ajax(this._options.getTokenUrl, {
          headers: {
            authorization: this._options.authorization
          }
        }).then(res => {
          this._options.token = res.uptoken;
          return this._options.token;
        }).catch(ex => {
          throw new Error("获取uptoken失败:" + ex.message);
        });
      } else {
        return Promise.reject(new Error("无法获取token"));
      }
    }
  }

  upload(file, filename, key) {
    return this.getToken().then(token => {
      const formData = new FormData();
      formData.append("key", key || filename);
      formData.append("token", token);
      formData.append("file", file, filename);
      return formData;
    }).then(data => {
            //注意不要设置content-type,浏览器自动会填充
      return this.ajax("http://upload.qiniu.com/", {
        method: "POST",
        data,
      });
    });
  }
}


canvas.toBlob(blob => {
    const filename = Date.now() + Math.random() + ".png";
    const qiniu = new Qiniu({getTokenUrl:"这里写获取七牛token的接口地址"});
    qiniu.upload(blob, filename);
}, "image/png");

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91977.html

相关文章

  • Laravel中前端js上传图片到七牛云

    摘要:以下中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。你的控制器地址请求成功之后,调用刚刚写好的方法,把传入过去让页面初始化的时候就请求这里差不多就可以啦,更多的操作参考文档七牛云官方文档 以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件,下面是通过CDN引入的Staticfi...

    jollywing 评论0 收藏0
  • Laravel中前端js上传图片到七牛云

    摘要:以下中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。你的控制器地址请求成功之后,调用刚刚写好的方法,把传入过去让页面初始化的时候就请求这里差不多就可以啦,更多的操作参考文档七牛云官方文档 以下Laravel中使用浏览器端上传图片到七牛云,下面只是做一些简单的流程实例。详情请看官方文档七牛云官方js文档 1. 首先引入相应的js文件,下面是通过CDN引入的Staticfi...

    EscapedDog 评论0 收藏0
  • 牛云存储官方接口PHP版本

    摘要:基于七牛云存储官方构建。使用此构建您的网络应用程序,能让您以非常便捷地方式将数据安全地存储到七牛云存储上。应用接入获取和要接入七牛云存储,您需要拥有一对有效的和用来进行签名认证。文件下载七牛云存储上的资源下载分为公有资源下载和私有资源下载。 此 SDK 适用于 PHP 5.1.0 及其以上版本。基于 七牛云存储官方API 构建。使用此 SDK 构建您的网络应用程序,能让您以非常便捷地方...

    wwq0327 评论0 收藏0
  • koa2实现上传图片,并且同步上传到七牛云存储

    摘要:因为升级到新的版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于上传图片的小记录一下心得。 因为升级到新的node版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得。 废话不多说,下面直接上代码,里面都有注释。 const Koa = require(koa); const route = requ...

    laznrbfe 评论0 收藏0

发表评论

0条评论

Carl

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<