博客

众所周知，在 HTML5 中，A 标签是支持 download 属性的，此属性指示浏览器下载 URL 而不是导航到它，但是该属性受到同源策略的限制。

那么我们如何让 A 标签在跨域场景下依然有效呢？

解决方案就是将图片先转换成 canvas，然后获取 canvas 的data-URL,最后创建一个 a 标签模拟点击即可。

注: 图片要启用 CORS

核心代码如下:

const width = 200, height = 200;

// 创建canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = width;
canvas.height = height;

// 创建Image实例
const img = new Image();
img.setAttribute("crossOrigin", "Anonymous");
img.src = url;

img.onload = function() {
  context.drawImage(img, 0, 0, width, height);
  const a = document.createElement("a");
  a.href = canvas.toDataURL();
  a.download = name;
  a.click();
};

复制代码

完整代码 传送门