Vue下载图片和批量下载图片

下载图片和批量下载图片vue

1. 下载单个图片

this.downloadImg(url, "pic");

downloadImg(imgsrc, name) {
    var image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL(); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    };
    image.src = imgsrc;
},

2. 批量下载图片

• 安装 jszip file-saver

npm i file-saver
npm i jszip

• 导入项目中

import JSZip from "jszip";
import FileSaver from "file-saver";

• 批量操作

// 批量下载图片 只下载有图片地址的图片
BatchDownload() {
    var tempList = []; // 临时数组
    var isWarning = false; // 是否警告
    // for 循环 获取临时数组
    for (let i = 0; i < this.imgDataUrl.length; i++) {
        if (!this.imgDataUrl[i].qrCodeImg) {
            isWarning = true;
        } else {
            // 存在 url 的 item 存入 临时数组 用于压缩文件
            tempList.push(this.imgDataUrl[i]);
        }
    }
    // 是否警告 只警告一次
    if (isWarning) {
        this.$message({
            type: "warning",
            message: "当前存在没有图片地址,请重新生成",
        });
    }
    // 用新的临时数组 只下载存在的图片
    let _this = this;
    let zip = new JSZip();
    let cache = {};
    let promises = [];
    _this.title = "正在加载压缩文件";
    for (let item of tempList) {
        const promise = _this.getImgArrayBuffer(item.qrCodeImg).then((data) => {
            // 下载文件, 并存成ArrayBuffer对象(blob)
            zip.file(item.number + ".png", data, { binary: true }); // 逐个添加文件
            cache[item.number] = data;
        });
        promises.push(promise);
    }
    Promise.all(promises)
        .then(() => {
        zip.generateAsync({ type: "blob" }).then((content) => {
            _this.title = "正在压缩";
            // 生成二进制流
            FileSaver.saveAs(content, "图片"); // 利用file-saver保存文件  自定义文件名
            _this.title = "压缩完成";
        });
    })
        .catch(() => {
        _this.$message.error("文件压缩失败");
    });
},