跨域以及非跨域下载指定url图片方案

非跨域url图片转base64

• 条件：合法图片url、图片不存在跨域等限制
• 流程：转base64 -> 在进行canvas绘制 -> 模拟点击事件触发下载图片文件

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
}

利用三方库superagent处理防盗链图片方法

• 条件：合法图片url、三方库superagent
• 流程：请求图片url -> 转buffer -> 转图片文件

const superagent = require("superagent");
const fs = require("fs");

/**
 * 将图片转成buffer
 *
 * @param {string} imgUrl 图片url
 * @return {Promise<Buffer>} 文件buffer
 */
async function imgUrlToBuffer(imgUrl) {
  const urlInfo = imgUrl.split("/");
  const fileName = urlInfo[urlInfo.length - 1];
  return await new Promise(async function (resolve) {
    try {
      await superagent
        .get(imgUrl)
        .set("User-Agent", "Mozilla/5.0")
        .buffer(true)
        .parse((res) => {
          const buffer = [];
          res.on("data", (chunk) => {
            buffer.push(chunk);
          });
          res.on("end", () => {
            const data = Buffer.concat(buffer);
            // buffer转为图片文件
            fs.writeFile(`./dist/${fileName}`, data, function (err) {
              if (err) {
                console.log("buffer -> jpg error: ", err);
              }
            });
            resolve(data);
          });
        });
    } catch (e) {
      console.log(`invalid img: ${imgUrl}`);
      resolve(null);
    }
  });
}