- 原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载。(单张图片下载)
- 多张图片批量下载导出压缩包需要引入jsZip
- 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火狐都无法打开