1.下载同源图片问题 （使用a标签下载）

var img_src = obj.getAttribute('data-src')

var a = document.createElement('a');

a.href = img_src; //图片地址

a.download = 'test'; // 图片名字

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

２．下载不同源图片　xmlhttp　获取图片blob格式　再使用window.URL.revokeObjectURL（blob）创建可访问的链家

将链家赋值给a.href 可完成下载

var url = obj.getAttribute('data-src')

var xmlhttp;

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", url, true);

xmlhttp.responseType = "blob"; // 请求返回的数据类型

xmlhttp.onload = function() {

if (this.status == 200) {

var blob = this.response;

var img = document.createElement("img"); // 预览图片

img.onload = function(e) {

window.URL.revokeObjectURL(img.src);

};

img.src = window.URL.createObjectURL(blob);

document.body.appendChild(img);

var a = document.createElement('a'); // 下载图片

a.href = window.URL.createObjectURL(blob); //图片地址

a.download = 'test.jpg'; // 图片名字

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

}

}

xmlhttp.send();

github 例子  https://github.com/a1044187112/download-img 

注意：1.chrome  不能同时下载多个文件 ，浏览器会拦截

           2. 图片所在服务器需要允许跨域访问的才可以，没有设置的在xmlhttp获取数据时报错