一翘狱、同源圖片保存

let e = new MouseEvent('click');    // 模擬點(diǎn)擊事件
let url = '/assets/img.png'; //圖片路徑
a.download = '下載圖片'     // 給a設(shè)置download屬性
a.href = url     
a.dispatchEvent(e)      // 觸發(fā)點(diǎn)擊事件

二赤惊、非同源圖片保存到本地

2、前端js代碼
download(imgUrl) {
    let img = new Image();
    // 解決跨域 canvas污染問(wèn)題
    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')  // 圖片轉(zhuǎn)為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() // 加時(shí)間戳
}
為什么加時(shí)間戳?
1祠锣、js中new 出來(lái)的img對(duì)象加上crossorigin屬性，是讓圖片按照cors請(qǐng)求圖片留特，這樣圖片可以到canvas上進(jìn)行繪制的

2蜕青、html中img標(biāo)簽( <img src="圖片路徑" alt />)加載時(shí)贺喝，瀏覽器會(huì)將其緩存躏鱼，若img標(biāo)簽未設(shè)置crossorigin,點(diǎn)擊下載圖片時(shí)鹊漠，還是會(huì)報(bào)跨域問(wèn)題的錯(cuò)誤怔鳖，這是由于js創(chuàng)建的img直接訪問(wèn)的是緩存的圖片度陆，而js中又設(shè)置里crossorign屬性叽粹，則它要以CORS的方式請(qǐng)求持钉，但緩存中的圖片丙不是衡招，所以瀏覽器會(huì)報(bào)錯(cuò)

3、我解決2中的問(wèn)題是在img標(biāo)簽中也設(shè)置crossorign屬性每强，確實(shí)始腾，可以下載圖片到本地，但是空执，又引來(lái)新的問(wèn)題浪箭，圖片在網(wǎng)頁(yè)上不能顯示出來(lái)

4、所以最后辨绊，讓圖片既能顯示又能不報(bào)錯(cuò)奶栖，即img標(biāo)簽不設(shè)置crossorign屬性，js中訪問(wèn)圖片的路徑加上時(shí)間戳门坷，即不是瀏覽器緩存的路徑宣鄙，就可以啦

三、批量打包下載圖片

我是在vue中項(xiàng)目用到的冻晤，所以。绸吸。鼻弧。
1、安裝插件 npm install jszip --save    
            npm install flie-saver --save
            
2锦茁、在需要用的文件里引入
    import JSZip from 'jszip'
    import FileSaver from 'file-saver'
    
3攘轩、就是點(diǎn)擊下載事件

    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 污染問(wèn)題
            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編碼數(shù)據(jù)
                
                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();
        }
    }