js 實現點擊圖片下載圖片文件

 js 實現點擊圖片下載圖片文件

downloadImage:function(val){
    // val 為傳入的圖片地址
        let _type_index = val.lastIndexOf('.');
        let _type = val.substr(_type_index + 1); //原始圖片類型
        let image = new Image();
        image.setAttribute('crossOrigin','anonymous'); //消除跨域
        image.src = val;
        image.onload = function(){
          //借助canvas實現 消除 圖片地址會先直接窗口打開圖片地址
          let canvas = document.createElement('canvas');
          canvas.width = image.width;
          canvas.height = image.height;
          let context = canvas.getContext('2d');
          context.drawImage(image,0,0,image.width,image.height);
          let url = canvas.toDataURL('image/'+_type);
          let blob = _this.dataUrlToBold(url);
          let obj_url = URL.createObjectURL(blob); // 消除Chrome下文件太大 導致下載失敗（網絡失敗）的問題
          let a = document.createElement('a');
          let event = new MouseEvent('click');
          a.download = name || 'xi-yuan';
          a.href = obj_url;
          a.dispatchEvent(event);
          loading.close();
        };
      },
      dataUrlToBold(url){
        let arr = url.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bStr = atob(arr[1]),
            n = bStr.length,
            u8arr = new Uint8Array(n);
        while(n--){
          u8arr[n] = bStr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
      }