图片点击后直接下载

1. 使用a标签的download属性。

<a href="https://geekjc-img.geekjc.com/logo.png" download="logo.png">下载图片</a>

将a标签的href属性指向图片的地址;同时增加download属性;即可实现点击下载.

download属性的属性值选填,代表下载图片的名称,如不填写,则使用href中的图片名称,即图片的原名称.

a标签的download属性目前主流浏览器只有火狐和谷歌支持.

2. iframe标签，生成iframe,src指向图片地址,调用document.execCommand("SaveAs")方法.

这里有浏览器兼容性问题：

在Trident内核浏览器(IE等)下,给按钮(a标签)绑定事件,使用创建<iframe>标签方法;

在火狐,谷歌下使用<a>标签的download属性进行下载.

so , 

首先判断浏览器,决定增加属性,还是绑定事件;

在绑定事件的逻辑内,

首先判断页面是否存在指定的<iframe>,不存在则生成,存在则修改src属性.

然后调用SaveAs命令进行保存.(document.execCommand('saveAs')

)

3. 举例：

//判断是否为Trident内核浏览器(IE等)函数
function browserIsIe() {
    if (!!window.ActiveXObject || "ActiveXObject" in window){
        return true;
    }
    else{
        return false;
    }
}

 

<iframe height="0" width="0" src="201782595503368.jpg" name="saveImage" id="saveImage"> </iframe> 
<a href="C:\Users\12580\Desktop\201782595503368.jpg" onclick="saveImage.document.execCommand('saveAs');">Click Me</a> a

点击后，直接加载了图片：