自学内容网 自学内容网

通过JS实现下载图片到本地教程分享

今天分享的这个方法我之前自己试了一下,感觉还行,原理就是通过<a>标签的新增属性实现的,然后可以强制触发下载功能,废话不多说,直接上教程。

首先在HTML写下面的代码:

<a href="img.jpg" download="imgxia"> <img src="img.jpg" alt=""> </a>
<img id="xia2" src="img.jpg" alt="">
<button class="downloadBtn" type="button" οnclick="downloadImg()">下载图片</button>

JS核心下载代码:

function downloadImg(){
var img = document.getElementById('xia2'); 
var url = img.src; 
var a = document.createElement('a'); 
var event = new MouseEvent('click') 
a.download = 'imgxia' 
a.href = url;
a.dispatchEvent(event) 
}

点击按钮之后,就会出现下载框了:

通过JS实现下载图片到本地教程分享 JS教程 第2张

本文结束


原文地址:https://blog.csdn.net/qq974416775/article/details/143824584

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!