jQuery與vue實現點擊下載圖片 以及js實現批量打包下載圖片

•  原理：用canvas的toDataUrl() API獲取到圖片的base64編碼，再利用觸發a標籤事件進行下載。（單張圖片下載）
• 多張圖片批量下載導出壓縮包需要引入jsZip

1. jQuery實現點擊下載主要代碼，但主要部分代碼也適用於vue

$('.btn').click(function() {
	downloadIamge('http://ci.xiaohongshu.com/bb60f7bf-78ea-404e-b8cf-8a77dc60eded?imageView2/2/w/1080/format/webp', 'bg')
})
function downloadIamge(imgsrc, name) {
    let image = new Image();
	// 解決跨域 Canvas 污染問題
	image.setAttribute("crossOrigin", "anonymous");
	image.onload = function() {
	    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/png"); //得到圖片的base64編碼數據
	    let a = document.createElement("a"); // 生成一個a元素
	    let event = new MouseEvent("click"); // 創建一個單擊事件
	    a.download = name || "photo"; // 設置圖片名稱
	    a.href = url; // 將生成的URL設置爲a.href屬性
	    a.dispatchEvent(event); // 觸發a的單擊事件
    }
	image.src = imgsrc;
}

下載效果爲

2.如果實現批量下載，就得遍歷以上代碼，但是這樣用戶體驗不好，還容易出現網絡錯誤。如果實現前端批量下載壓縮包，體驗會好很多。前端實現批量下載圖片壓縮包的核心邏輯是：得到圖片的base64編碼，然後添加進壓縮包裏

vue項目需要引入 jsZip

npm i jszip -S  or  npm install jszip // 安裝jszip

頁面引入jsZip

//main引入或者是組件內引入
var JSZip = require('jszip')

以下爲核心代碼 

    var zip = new JSZip()
    var imgs = zip.folder(blogTitle)
    var baseList = []
    var _this = this
    var arr = ['/images/bg.png','/images/bg1.png']
    for (var i = 0; i < arr.length; i++) {
          let image = new Image()
          // 解決跨域 Canvas 污染問題
          image.setAttribute('crossOrigin', 'anonymous')
          image.onload = function () {
            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() // 得到圖片的base64編碼數據 let url =                 
            canvas.toDataURL('image/png')
            baseList.push(url.substring(22))
            if (baseList.length === arr.length) {
              if (baseList.length > 0) {
                _this.$notify({
                  title: '成功',
                  message: '即將下載',
                  type: 'success'
                })
                for (let k = 0; k < baseList.length; k++) {
                  imgs.file('photo' + k + '.png', baseList[k], {base64: true})
                }
                zip.generateAsync({type: 'blob'}).then(function (content) {
                  // see FileSaver.js
                  saveAs(content, blogTitle + '.zip')
                })
              } else {
                _this.$notify.error({
                  title: '錯誤',
                  message: '暫無圖片可下載'
                })
              }
            }
          }
          image.src = arr[i]
        }

其中要注意的兩點

1.把圖片的base64編碼添加進壓縮包前必須先剔除前面的"data:image/png;base64,"

比如base64編碼："data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

紅色部分需要去除後再調用jsZip的file方法添加進壓縮包，在添加的時候聲明base64:true

imgs.file('photo' + k + '.png', baseList[k], {base64: true})

2.如果下載的圖片是webp格式的話，需要在把圖片轉成base64編碼之前把webp格式替換成jpg/png，目前只有chrome瀏覽器支持webp的圖片格式，IE火狐都無法打開