HTML+JS如何实现图片下载到本地

在很多网站上，都有一个点击图片或点击某个链接会将指定的图片下载到本地的功能，而这个功能就需要html 元素中的 A 标签的 download 属性来实现，接下来就来说一说关于使用html或js实现图片点击下载的功能。

A 标签的 download 属性

download：属性为 A 标签在 HTML5 中新增加的一个属性，它可以强制触发浏览器的下载操作。

语法：

<a rel="nofollow" href="text.jpg" download="下载后的文件名称" >点击我可下载图片</a>

例：使用 html A 标签下载图片

HTML代码：

<a rel="nofollow" href="text.jpg" download="text">
    <img src="text.jpg" >
</a>

说明：

1、download 属性规定被下载的超链接目标。

2、在 <a> 标签中必须设置 href 属性。

3、该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，

js + html 实现下载

如果不方便使用A标签来实现下载，可以使用JS生成A元素的形式，来实现同样的效果。

案例代码：

<img id="mochu_img" src="test.jpg" >
<button  type="button" οnclick="Download_Img()">点击下载图片</button>
<script>
    function Download_Img() {
        var img = document.getElementById('mochu_img'); // 获取要下载的图片
        var url = img.src;                            // 获取图片地址
        var a = document.createElement('a');          // 创建一个a节点插入的document
        var event = new MouseEvent('click')           // 模拟鼠标click点击事件
        a.download = 'mochu_img'                      // 设置a节点的download属性值
        a.href = url;                                 // 将图片的src赋值给a节点的href
        a.dispatchEvent(event)                        // 触发鼠标点击事件
    }
</script>

download 属性补充说明

1、并不是所有的浏览器支持此属性，Firefox 和 Chrome是支持的

2、Chrome 浏览器，在本地测试时失效

3、download 属性，为html5 中新增的属性

以上就是HTML+JS如何实现图片下载到本地。生活的可怕之处就是在这里，有些人可以安于现在的生活，不自卑不敷衍，也能够很好淡然地生活下去；有些人想要去远方，想要生活剧烈，不疯魔不成活，虽然累倒也活得轰轰烈烈。可尴尬就尴尬在你活在另一种生活里——不上不下的生活。更多关于HTML+JS如何实现图片下载到本地请关注haodaima.com其它相关文章！