一、同源图片保存
let e = new MouseEvent('click'); // 模拟点击事件
let url = '/assets/img.png'; //图片路径
a.download = '下载图片' // 给a设置download属性
a.href = url
a.dispatchEvent(e) // 触发点击事件
二、非同源图片保存到本地
2、前端js代码
download(imgUrl) {
let img = new Image();
// 解决跨域 canvas污染问题
image.setAttribute('crossOrign', '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')
let e = new MouseEvent('click')
a.download = '下载图片'
a.href = url
a.dispatchEvent(e)
}
// imgUrl即为要下载图片的路径
image.src = imgUrl + '?time=' + new Date().valueOf() // 加时间戳
}
为什么加时间戳?
1、js中new 出来的img对象加上crossorigin属性，是让图片按照cors请求图片，这样图片可以到canvas上进行绘制的
2、html中img标签( <img src="图片路径" alt />)加载时，浏览器会将其缓存，若img标签未设置crossorigin,点击下载图片时，还是会报跨域问题的错误，这是由于js创建的img直接访问的是缓存的图片，而js中又设置里crossorign属性，则它要以CORS的方式请求，但缓存中的图片丙不是，所以浏览器会报错
3、我解决2中的问题是在img标签中也设置crossorign属性，确实，可以下载图片到本地，但是，又引来新的问题，图片在网页上不能显示出来
4、所以最后，让图片既能显示又能不报错，即img标签不设置crossorign属性，js中访问图片的路径加上时间戳，即不是浏览器缓存的路径，就可以啦
三、批量打包下载图片
我是在vue中项目用到的，所以。。。
1、安装插件 npm install jszip --save
npm install flie-saver --save
2、在需要用的文件里引入
import JSZip from 'jszip'
import FileSaver from 'file-saver'
3、就是点击下载事件
download() {
let packageName = '打包下载'; // 打包文件名称
let zip = new JSZip();
let img = zip.foler(packageName)
let baseList = []; // base64格式图片列表
let imgNameList = ['picture1', 'picture2'] // 图片名称列表
let imgUrlList = ['./1.png', './2.png'] // 图片路径列表
for(let i = 0; i < imgUrlList.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编码数据
canvas.toDataURL('image/png');
baseList.push(url.substring(22))//去掉base64编码前的data:image/png;base64,
if (baseList.length === imgUrlList.length && baseList.length > 0) {
for (let k = 0; k < baseList.length; k++) {
imgs.file(imgNameList[k] + '.png', baseList[k], {base64: true})
}
zip.generateAsync({type: 'blob'}).then(function (content) {
FileSaver.saveAs(content, packageName + '.zip');
});
}
};
image.src = imgUrlList[i] + '?time' + new Date().valueOf();
}
}
