圖片下載功能（base64）

兼容各個瀏覽器下載圖片

1. 圖片來源是線上地址
2. 圖片來源是項目的靜態資源
3. 圖片來源是Blob類型

思路：講圖片轉爲 base64 借用 a 標籤的downloan 屬性進行下載

靜態路徑圖片轉爲base64

/**
   * 靜態路徑圖片轉爲base64
   * @param {*} imgUrl 圖片路徑
   */
  img2Base64:function(imgUrl){
    return new Promise((resolve,reject)=>{
      const image = new Image();
      // 解決跨域 canvas 污染問題
      image.setAttribute("crossOrigin", "");
      image.src = imgUrl;
      image.onload = function() {
        const canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        resolve(canvas.toDataURL())
      }
    })
  },

 

blob類型的圖片轉爲base64

/**
   * blob類型的圖片轉爲base64
   * @param {*} blob  圖片流
   */
  blob2Base64:function(blob){
    return new Promise((resolve,reject)=>{
      let oFileReader = new FileReader();
      oFileReader.onloadend = function (e) {
        let base64 = e.target.result;
        resolve(base64);
      };
      oFileReader.readAsDataURL(blob);
    })
  },

然後見文件下載即可。

downLoadImage:function(base64,imgName){
    let browser = Utils.whichBrowser();
    if (window.navigator.msSaveOrOpenBlob) {
      var bstr = atob(base64.split(',')[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
       u8arr[n] = bstr.charCodeAt(n)
      }
      var blob = new Blob([u8arr])
      window.navigator.msSaveOrOpenBlob(blob, imgName + '.png');
     }else{
      var a = document.createElement('a')
      if (typeof a.download === 'undefined') {
        window.location = base64
      } else {
        a.href = base64
        a.download = browser=="FF" ? imgName + '.png' : imgName;
        document.body.appendChild(a)
        a.click()
        a.remove()
      }
    }
  },