【jQuery】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火狐都无法打开