众所周知,在 HTML5 中,A 标签是支持 download 属性的,此属性指示浏览器下载 URL 而不是导航到它,但是该属性受到同源策略的限制。
那么我们如何让 A 标签在跨域场景下依然有效呢?
解决方案就是将图片先转换成 canvas,然后获取 canvas 的data-URL,最后创建一个 a 标签模拟点击即可。
核心代码如下:
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();
};
复制代码
完整代码 传送门