本文详细解析了JavaScript实现浏览器图片下载的两种场景：同源与跨域。对于同源图片，利用HTML5 a标签的download属性即可直接下载；对于跨域图片，则需通过XMLHttpRequest获取Blob对象，动态创建a标签并触发点击来实现。文章提供了完整的代码示例及函数封装技巧，重点强调了阻止默认事件和指定文件名的必要性，确保下载功能在实际开发中有效运行。
实现图片下载功能主要分为两种情况：第一种是处理同源地址的图片，即位于本地项目中的资源；第二种是处理不同源的图片，例如托管在阿里云或七牛云等第三方域名下的资源。
接下来将具体阐述针对这两种不同场景的图片下载实现方式。
第一种情况：同源图片下载。
可以通过HTML中的a标签实现下载功能。a标签支持download属性，添加该属性后，点击链接将直接触发文件下载，而非打开预览。download属性的值可用于指定下载文件的名称；若未设置该属性，文件将使用默认名称进行下载。
具体示例如下：
<!-- 文件名为默认名称 -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download />
<!-- 文件名为baidu.gif -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="baidu" />
<!-- 文件名为baidu.png -->
<a href="./baidu_jgylogo3.gif" rel="external nofollow" rel="external nofollow" rel="external nofollow" download="baidu.png" />需要注意的是，此方法仅适用于同源链接的下载。对于非同源链接，浏览器通常会直接打开图片而非下载，例如访问非同源资源时 <a href="http://www.baidu.com/img/baidu_jgylogo3.gif" download />。
第二种情况：不同源图片下载。
具体实现代码如下：
var x=new XMLHttpRequest();
x.open("GET", "http://danml.com/wave2.gif", true);
x.responseType = 'blob';
x.onload=function(e){
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a');
a.href = url
a.download = ''
a.click()
}
x.send();将上述代码嵌入到点击事件监听器中即可生效，经实际测试验证有效。
应用案例演示。
说明：作者在实际开发环境中对上述代码进行了测试，具体案例记录如下：
1. HTML部分：在a链接上添加点击事件响应，以实现点击下载的功能。
<a href="http://192.168.1.8:8088/imgtmp/202304191632188702.png" rel="external nofollow"
onclick="saveas(this.href,'202304191632188702.png');" target="_blank">
202304191632188702.png
</a>2. JavaScript部分：将前述下载逻辑封装为一个独立函数，以便在点击事件中调用。
window.saveas = function(img,filename){
event.returnValue = false;
let x=new XMLHttpRequest();
x.open("GET", img, true);
x.responseType = 'blob';
x.onload=function(e){
let url = window.URL.createObjectURL(x.response);
let a = document.createElement('a');
a.href = url
a.download = filename
a.click()
}
x.send();
}注意：与前述基础代码相比，此处的函数封装进行了优化，需重点关注以下两点：
① 首先，event.returnValue = false; 用于阻止事件的默认行为；
② a.download = '' 必须传入具体的文件名参数！若不传入文件名，下载的文件将被错误地生成.json格式。