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('https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00423-3446.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 = [
      'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00423-3446.jpg',
      'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00423-3446.jpg',
      'https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00423-3446.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.js
                FileSaver.saveAs(content, "下载名称.zip");
              });
            })
            .catch((err) => {});
        } 
    },

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