成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Canvas保存圖片到七牛云

Carl / 2060人閱讀

摘要：最近在做一個(gè)項(xiàng)目，需要在前端對(duì)圖片切片并上傳到七牛云技術(shù)要點(diǎn)可將保存成二進(jìn)制文件將二進(jìn)制文件添加到中上傳數(shù)據(jù)到后端處理代碼實(shí)現(xiàn)目前沒(méi)有看到七牛云提供的支持上傳到云上的，所以這里自己實(shí)現(xiàn)了一下注意到七牛云的時(shí)候不要設(shè)置，讓瀏覽器自己處理請(qǐng)求

最近在做一個(gè)項(xiàng)目，需要在前端對(duì)圖片切片并上傳到七牛云

技術(shù)要點(diǎn)

canvas.toBlob(blob=>{}); //可將canvas保存成二進(jìn)制文件

formData.append("file", blob, "filename"); //將二進(jìn)制文件添加到FormData中

ajax.send(formData); //上傳數(shù)據(jù)到后端處理

代碼實(shí)現(xiàn)

目前沒(méi)有看到七牛云提供的JSSDK支持上傳blob到云上的， 所以這里自己實(shí)現(xiàn)了一下
注意ajax post formData到七牛云的時(shí)候不要設(shè)置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("請(qǐng)求失敗:" + ajax.status))
            }
          }
        };
        ajax.send(options.data);
      } else {
        reject(new Error("創(chuàng)建Ajax請(qǐng)求失?。?));
      }
    });
  }

  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("無(wú)法獲取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 => {
            //注意不要設(shè)置content-type,瀏覽器自動(dòng)會(huì)填充
      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:"這里寫(xiě)獲取七牛token的接口地址"});
    qiniu.upload(blob, filename);
}, "image/png");

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91977.html

相關(guān)文章

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫(xiě)好的方法，把傳入過(guò)去讓頁(yè)面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過(guò)CDN引入的Staticfi...

    jollywing 評(píng)論0 收藏0

  • Laravel中前端js上傳圖片到七牛云

    摘要：以下中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。你的控制器地址請(qǐng)求成功之后，調(diào)用剛剛寫(xiě)好的方法，把傳入過(guò)去讓頁(yè)面初始化的時(shí)候就請(qǐng)求這里差不多就可以啦，更多的操作參考文檔七牛云官方文檔 以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡(jiǎn)單的流程實(shí)例。詳情請(qǐng)看官方文檔七牛云官方j(luò)s文檔 1. 首先引入相應(yīng)的js文件，下面是通過(guò)CDN引入的Staticfi...

    EscapedDog 評(píng)論0 收藏0

  • 七牛云存儲(chǔ)官方接口PHP版本

    摘要：基于七牛云存儲(chǔ)官方構(gòu)建。使用此構(gòu)建您的網(wǎng)絡(luò)應(yīng)用程序，能讓您以非常便捷地方式將數(shù)據(jù)安全地存儲(chǔ)到七牛云存儲(chǔ)上。應(yīng)用接入獲取和要接入七牛云存儲(chǔ)，您需要擁有一對(duì)有效的和用來(lái)進(jìn)行簽名認(rèn)證。文件下載七牛云存儲(chǔ)上的資源下載分為公有資源下載和私有資源下載。 此 SDK 適用于 PHP 5.1.0 及其以上版本?；?七牛云存儲(chǔ)官方API 構(gòu)建。使用此 SDK 構(gòu)建您的網(wǎng)絡(luò)應(yīng)用程序，能讓您以非常便捷地方...

    wwq0327 評(píng)論0 收藏0

  • koa2實(shí)現(xiàn)上傳圖片，并且同步上傳到七牛云存儲(chǔ)

    摘要：因?yàn)樯?jí)到新的版本，之前的通過(guò)很多上傳圖片的方式都已經(jīng)不適用了，所以自己就寫(xiě)了一個(gè)對(duì)于上傳圖片的小記錄一下心得。 因?yàn)樯?jí)到新的node版本，之前的通過(guò)很多上傳圖片的方式都已經(jīng)不適用了，所以自己就寫(xiě)了一個(gè)對(duì)于 koa2上傳圖片的小demo,記錄一下心得。 廢話不多說(shuō)，下面直接上代碼，里面都有注釋。 const Koa = require(koa); const route = requ...

    laznrbfe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

Carl

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<