跨域以及非跨域下载指定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(&quot;User-Agent&quot;, &quot;Mozilla/5.0&quot;)
  .buffer(true)
  .parse((res) =&gt; {
    const buffer = [];
    res.on(&quot;data&quot;, (chunk) =&gt; {
      buffer.push(chunk);
    });
    res.on(&quot;end&quot;, () =&gt; {
      const data = Buffer.concat(buffer);
      // buffer转为图片文件
      fs.writeFile(`./dist/${fileName}`, data, function (err) {
        if (err) {
          console.log(&quot;buffer -&gt; jpg error: &quot;, err);
        }
      });
      resolve(data);
    });
  });

  } catch (e) {
console.log(`invalid img: ${imgUrl}`);
resolve(null);

  }
});
}