js进行图片本地下载（多张打包，单张）

js进行图片本地下载

这里我分两种一种是单张图片下载比较简单，另外一种是打包图片下载

批量图片下载

import JSZip from "jszip";
import FileSaver from "file-saver";
		//这里随便定义的数据
        const sourceList = [{
                id: 1,
                qrCode: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20160504%2Fmeilidehuacao_6269877.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655787943&t=a7b520e6c6ccb7a964be78218a421ba0',
                picName: '图片1'
            }, {
                id: 2,
                qrCode: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20150326%2Fyuanyeshangyikegududebaishu_4059557.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655787943&t=0be9a4b37d04e2dd7cd2b0ae472dac41',
                picName: '图片2'
            }]
            //转换图片为base64格式
        const getImageBase64 = image => {
            // 创建一个画布
            const canvas = document.createElement('canvas')
                // 让画布的宽高等于图片的宽高
            canvas.width = image.width
            canvas.height = image.height
                // 然后在画布上进行画画
            const ctx = canvas.getContext('2d')
                // 开始画图片，1.绘制的对象2.绘制的位置，3绘制的宽高
            ctx.drawImage(image, 0, 0, image.width, image.height)
            //下面一段代码是看某位up主写的我感觉并无多大作用便注释掉了，重新写了一段代码，知道下面这段跟我的有啥区别欢迎评论区指出
                // 设置图片后缀名
                // const extension = image.src
                //     .substring(image.src.lastIndexOf('.') + 1)
                //     .toLowerCase()
                // return canvas.toDataURL('image/' + extension, 1)
            return canvas.toDataURL()
        }
        //执行打包下载 参数一下载的批量图片信息, 参数二打包后的压缩包名称自己定义
        downloadZip(sourceList, zipName = '二维码集合')
        //打包下载方法
        async function downloadZip(sourceList, zipName) {
            const zip = new JSZip() //创建一个压缩对象
            const fileFolder = zip.folder(zipName) // 创建 zipName 文件夹
            const fileList = []
            //遍历图片数据
            for (let i = 0; i < sourceList.length; i++) {
            	//压缩后的每张图片对应名
                const name = sourceList[i].picName // 注意: 每张图片的名称--需要对数据属性进行转换
                //创建图片对象 设置图片基本信息
                const image = new Image()
                image.setAttribute('crossOrigin', 'Anonymous') // 设置 crossOrigin 属性，解决图片跨域报错
                //设置图片地址----稍后进行base64转换
                image.src = sourceList[i].qrCode
                //图片下载
                image.onload = async() => {
                	//路径base64转换
                    const url = await getImageBase64(image)
                    //往压缩包里添加图片数据
                    fileList.push({
                            name: name,//压缩名
                            img: url.substring(22)//去掉base64文件标识，img是文件形式
                        }) 
                     //确保每个数据都遍历完
                    if (fileList.length === sourceList.length) {
                    	//确保数据不为空
                        if (fileList.length) {
                            for (let k = 0; k < fileList.length; k++) {
                                // 往文件夹中，添加每张图片数据fileFolder文件夹压缩包
                                fileFolder.file(fileList[k].name + '.png', fileList[k].img, {
                                    base64: true,
                                    //下面的可以省略
                                 	compression: "DEFLATE",      // STORE：默认不压缩 DEFLATE：需要压缩
                       				compressionOptions: {
                          	  			level: 9  // 压缩等级1~9    1压缩速度最快，9最优压缩方式
                            // [使用一张图片测试之后1和9压缩的力度不大，相差100字节左右]
                            //注意到达这里的时候image的路径必须是带有data：image/png;base64,
                        }

                                })
                            }
                            zip.generateAsync({
                             // 压缩的结果为blob类型（二进制流）,可用作文件上传
                                type: 'blob'
                            }).then(content => {
                             // 直接在浏览器打成zipName.zip包并下载，saveAs依赖的js是FileSaver.js
                                FileSaver.saveAs(content, zipName + '.zip')
                            })
                        }
                    }
                }
            }
        }

下面两张图片是开启压缩跟不压缩发现差别并不大，（我这里是两张图片的压缩)

单张图片下载

 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元素
        a.download = name ; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        //let event = new MouseEvent('click'); // 创建一个单击事件
        //a.dispatchEvent(event); // 触发a的单击事件
        a.click()//上面两个代码等于这个代码
      };
      image.src = imgsrc;
    },