js保存图片到本地

一、同源图片保存

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();
        }
    }