pc端js根据图片url进行下载单张图片以及批量下载到本地

图片url进行下载单张图片以及批量下载到本地"/>

pc端js根据图片url进行下载单张图片以及批量下载到本地

1、单张下载

单张下载到本地主要实现方式是
1.使用cavans把图片转化未base64格式
2.创建a标签然后创建一个点击事件进行下载到本地
主要代码如下

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

如果下载的格式不是图片格式，那么很有可能就是你的命名那里有特殊符号，这样我们就需要进行筛选掉特殊符号

    // 过滤特殊字符串foramtStr(s) {var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]");var rs = "";for (var i = 0; i < s.length; i++) {rs = rs + s.substr(i, 1).replace(pattern, "");}return rs;},

2、批量下载压缩包

1、需要遍历把图片改为base64
2、创建文件夹
3、创建压缩包并下载

首先下载两个插件
file-saver和jszip，我使用的版本分别是
“file-saver”: “^2.0.5”,
“jszip”: “^3.6.0”,
页面引用
import JSZip from “jszip”;
import FileSaver from “file-saver”;

    // 图片转64进制getBase64Image(src) {return new Promise(function (resolve, reject) {var canvas = document.createElement("canvas"),ctx = canvas.getContext("2d"),img = new Image();img.crossOrigin = "Access-Control-Allow-Origin";img.onload = function () {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL("image/png");let deleDataHeader = dataURL.split(",")[1];resolve(deleDataHeader);canvas = null;};//这个很重要img.src =src;});},

    // 批量下载图片downLoad() {let urls = ['.jpg','.jpg','.jpg'];let promises = [];urls.map((item) => {promises.push(this.getBase64Image(item));});Promise.all(promises).then((result) => {let zip = new JSZip();// 创建压缩包let img = zip.folder("文件夹名称"); // 创建文件夹let number = 0;result.map((p) => {let i = number++;img.file(`${i}.png`, p, {base64: true,});});zip.generateAsync({ type: "blob" }).then(function (content) {// see FileSaver.jsFileSaver.saveAs(content, "下载名称.zip");});}).catch((err) => {});} },

如果你进行下载的时候遇到跨域，那么就是这样图片你没权限下载，需要后端技术人员添加cors头