我想为图片创建一键下载链接。我得到的结果与 html5 下载属性不一致。
W3 学校有一个触发下载的工作示例：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download
当我将图片网址更改为其他任何内容时，它不会触发文件下载。
例如此代码不会触发下载：
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>
谁能解释一下原因？
【问题讨论】：
我问过同样的问题question，这是对我有用的代码：
(async () => {
//create new a element
let a = document.createElement('a');
// get image as blob
let response = await fetch('https://media2.giphy.com/media/DvyLQztQwmyAM/giphy.gif?cid=e9ff928175irq2ybzjyiuicjuxk21vv4jyyn0ut5o0d7co50&rid=giphy.gif');
let file = await response.blob();
// use download attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
a.download = 'myGif';
a.href = window.URL.createObjectURL(file);
//store download url in javascript https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access
a.dataset.downloadurl = ['application/octet-stream', a.download, a.href].join(':');
//click on element to start download
a.click();
})();
【讨论】：
在您附加的 w3schools 示例中，您应该单击以开始下载的链接文本是图像。他们将图像放入锚标记 (<a></a>) 中，然后将 URL 提供给锚的 href attr。然后如果你改变href，url会改变而不改变图片，你可以点击图片开始下载。
在您附加到您的问题的代码中（如果您将 </a> 添加到它的末尾，它正在工作并将图像下载为文件。），您已将图像的 URL 作为 href属性。因此，如果您更改 href，将下载不同的文件。
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>click</a>如果你想点击你的图片开始下载，你应该在锚点内放一张图片，然后给出 href attr，你的文件 URL。
<a href="" download>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" alt="image" width="100" />
</a>【讨论】：
为什么它不起作用的问题是download 属性仅适用于同源 URL。你可以在这里找到详细信息MDN Docs
至于替代方案，您可以使用类似这样的一些 javascript 来实现。
function download_img(e,link){
var image = new Image();
image.crossOrigin = "anonymous";
image.src = link;
image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
canvas.getContext('2d').drawImage(this, 0, 0);
var blob;
// ... get as Data URI
if (image.src.indexOf(".jpg") > -1) {
blob = canvas.toDataURL("image/jpeg");
} else if (image.src.indexOf(".png") > -1) {
blob = canvas.toDataURL("image/png");
} else if (image.src.indexOf(".gif") > -1) {
blob = canvas.toDataURL("image/gif");
} else {
blob = canvas.toDataURL("image/png");
}
tempbtn = document.createElement('a');
tempbtn.href = blob;
tempbtn.download = 'image.jpg'; // or define your own name.
tempbtn.click();
tempbtn.remove();
};
}<!DOCTYPE html>
<html>
<body>
<a href="#" onclick="download_img(this,'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg')" >Download image
</a>
<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
</body>
</html>【讨论】：