Canvas保存圖片到七牛雲

最近在作一個項目，須要在前端對圖片切片並上傳到七牛雲

技術要點

1. canvas.toBlob(blob=>{}); //可將canvas保存成二進制文件
2. formData.append('file', blob, 'filename'); //將二進制文件添加到FormData中
3. 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');