强制浏览器在点击时下载图像文件
问题出现的原因是由于浏览器的安全策略，不允许跨域下载图片文件。解决方法是使用XMLHttpRequest发送GET请求获取图片文件的二进制数据，并通过创建一个URL对象将其转换为可下载的链接，然后通过创建一个标签并设置其href和download属性来实现强制下载。
以下是完整的文章：
自从2018年春季以来，由于浏览器跨域限制，无法通过点击链接强制下载图片文件。如果您想在除imgur.com以外的域上创建下载链接，将无法按预期工作。具体信息可以参考Chrome的废弃和删除公告。
为了解决这个问题，我们可以使用XMLHttpRequest对象发送GET请求，并将响应类型设置为"blob"，以获取图片文件的二进制数据。然后，通过URL.createObjectURL方法创建一个可下载的链接。
以下是实现强制下载的代码：
function forceDownload(url, fileName){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function(){
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(this.response);
var tag = document.createElement('a');
tag.href = imageUrl;
tag.download = fileName;
document.body.appendChild(tag);
tag.click();
document.body.removeChild(tag);
}
xhr.send();
}
使用上述代码，可以通过调用forceDownload函数来实现图片的强制下载。该函数需要传入两个参数，即图片的URL和文件名。
然而，该方法仍然无法解决图片打开时出现“图片损坏”的问题。这可能是由于其他原因引起的，例如图片本身存在问题。如果图片文件正常，那么可能是浏览器或通过该方法下载的方式导致的问题。
总结起来，通过XMLHttpRequest对象发送GET请求并转换为可下载链接的方法可以解决浏览器不允许跨域下载图片文件的问题。但是，如果图片文件本身存在问题，可能会导致打开时显示“图片损坏”。
在某些web应用中，我们希望用户点击一个链接时能够强制浏览器下载图片文件。下面的代码段展示了如何在Chrome和Firefox中实现这个功能：
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
这是一个非常好的解决方案，特别适用于JavaScript在应用中得到广泛使用的情况。然而，这个解决方案只在Google Chrome中有效（在测试环境中）。有没有办法测试兼容性呢？我想使用这个技术，但是也需要支持其他浏览器，所以需要在不支持时提供替代方案（比如在新窗口中打开PDF，或者提供下载链接）。有人成功实现过吗？
感谢提供的解决方案！需要注意的是，如果省略了`document.body.appendChild(link)`，在Firefox中将无法工作。在`link.click()`之后，最好使用`document.body.removeChild(link)`来移除创建的元素。
另外，为了避免DOM中产生垃圾，可以使用以下代码来在10毫秒后移除元素：
setTimeout( function () { link.parentNode.removeChild( link ); },10 );
这个解决方案对视频也适用。我在Firefox和Chrome中进行了测试。Firefox决定在下载时播放视频，并将其存储在/tmp目录中（在Linux上进行了测试），而不是“Downloads”目录中。Chrome没有任何问题。
非常感谢提供这个解决方案，因为问题是如何在JavaScript中实现这个功能的。
需要注意的是：
1. 由于CORS的限制，这个解决方案在本地无法工作。
2. 在macOS的Brave浏览器中，这将立即保存图片。在iOS的Safari浏览器中，这会弹出一个对话框，询问是否查看或保存图片。如果选择保存，它将保存在iOS Safari中的一个神秘位置（我期望它保存到我的Images应用程序中，详细信息请参考macreports.com/…）。在iOS的Brave浏览器中，它只是打开图片。
如果想要确保代码不影响用户界面，还可以添加`element.style.display = 'none'`。
问题的原因：从2018年春季开始，对于跨源的链接（cross-origin hrefs），浏览器不再支持强制下载图片文件。
解决方法：使用HTML5的download属性可以实现这个功能。但是如果不想使用HTML5或者服务器端工具，目前没有其他解决方法。
文章内容如下：
使用HTML5，你可以在链接中添加download属性。
符合规范的浏览器将会提示下载带有相同文件名的图片（在本例中是image.png）。
如果为这个属性指定一个值，那么这个值将成为新的文件名。
更新：从2018年春季开始，对于跨源的链接，浏览器不再支持强制下载图片文件。所以，如果你想在imgur.com以外的域名上创建``，它将无法按预期工作。Chrome的更新公告中有更多信息。
Richard Parnaby-King说：使用HTML5的属性可以实现，但我想在不使用HTML5或任何服务器端工具的情况下实现（如果可能的话）。谢谢帮助！
尽管还不是所有浏览器都完全支持，但如果你不关心IE或Safari，这是一个不错的解决方案。
谢谢，提供HTML5的解决方案。如何仍然允许“另存为”，让我在保存之前输入文件名？
我不能控制这个文件应该下载到哪里吗？它直接下载到下载文件夹。我希望它使用HTML文件的本地路径。
不，这会打开安全漏洞（想象一下有人直接将恶意文件保存到你的Windows文件夹中）。下载路径基于浏览器设置 - 例如，默认情况下Chrome会下载到你的下载文件夹中。
对于跨源的问题，谢谢你的提醒。你知道其他浏览器是否也会做同样的事吗？唉...我讨厌跨源问题。