前端打包下载图片

前段时间pc端的一个需求，需要将图片打包下载到本地，于是就开始网上各种搜，折腾了几天，看了各种版本，最终自己整合后，终于实现功能。

刚开始的时候，则是想着实现能下载图片到本地，则想到使用a标签下载

let a = document.createElement('a'); //创建一个a节点
let e = new MouseEvent('click'); // 模拟点击事件
let url = './1.png'; //
a.download='下载图片'; // 给a设置download属性
a.href = url
a.dispatchEvent(e)   // 触发点击事件

但是却发现，确下载不了，原来这样只能是同源的图片的才能保存，由于项目的图片地址时阿里云oss上的，所以只能舍弃，便在网上各种找，终于找到非同源图片保存的方法，参考了（https://juejin.im/post/5c8882fd5188257a323f5d63）这篇文章后,最后还是不能解决跨域报错问题。最终各种尝试，发现一个问题，即改变浏览器缓存图片的路径，所有问题便解决了

1、我们项目的图片地址来源是阿里云，所以在阿里云oss设置允许跨域： Access-Control-Allow-Orign: *
2、则前端js代码
	downLoadImg(url) {
		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)
    	}
    	 image.src = imgUrl  + '?t'
	}
	为什么加图片路径后加***t***?
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中访问图片的路径加上**t**，即不是浏览器缓存的路径，就可以啦

由于需求是需要打包下载，安装打包文件的插件即可，项目是基于vue的，所以

1、安装插件 npm install jszip --save    
            npm install flie-saver --save
2、在需要用的文件里引入
    import JSZip from 'jszip'
    import FileSaver from 'file-saver'
           

参考文章：https://juejin.im/post/5c8882fd5188257a323f5d63