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

在HTML5中,download是<a>便签的新增属性,download属性能让我们指定浏览器下载文件时的默认名称,将download属性添加到<a>连接上,当我们点击这个链接,download属性值里的名称会显示到弹出的下载框里,而且download属性能够强制触发下载操作

1:可以通过<a>链接来实现图片下载

1<a href="test.jpg" download="图片名字"> 2 <img src="test.jpg" alt=""> 3</a>

2:通过JS来触发<a>连接来实现图片下载

1<img id="testImg" src="test.jpg" alt=""> 2<button class="downloadBtn" type="button" οnclick="downloadImg()">下载图片</button> 3 4function downloadImg(){ 5 var img = document.getElementById('testImg'); // 获取要下载的图片 6 var url = img.src; // 获取图片地址 7 var a = document.createElement('a'); // 创建一个a节点插入的document 8 var event = new MouseEvent('click') // 模拟鼠标click点击事件 9 a.download = '图片名字' // 设置a节点的download属性值 10 a.href = url; // 将图片的src赋值给a节点的href 11 a.dispatchEvent(event) // 触发鼠标点击事件 12 }
点赞
收藏

评论区

加载中...

相关推荐

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

关于dorker安装的wordpress无法上传主题和插件的解决办法

首先,容器里居然没有php.ini这个文件。第二,容器里的配置文件无法编辑解决办法在php官网下载php.ini这个文件,修改后通过主机copy到容器里1、要查找容器的名称或ID,可以使用以下命令:dockerps这将显示正在运行的容器的列表,类似于以下示

在前端学习道路上,容易混淆的几个知识点!

async与deferasync:可选属性。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效(写在html文件中的js代码,添加此属性无效,仍按代码加载顺序执行)。defer:可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。script标签属性async与

Java第四十五天,Maven高级篇(三),私服

一、安装私服1.下载Nexus方法一:到Nexus官网下载Nexushttps://www.sonatype.com/方法二:我的分享https://download.csdn.net/download/ITlanyue/127366382.解压到指定目录(无中文

CSS基本语法及页面引用

css基本语法及页面引用(1)css基本语法css的定义方法是:选择器{属性:值;属性:值;属性:值;}选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。代码示例:/css注释ctrlshift"/"/d

Alamofire4.x开源代码分析(三)文件上传下载

Alamofire支持下载图片到内存或者磁盘,Alamofire.request开头的请求会把数据加载进内存,适用于小文件,如果文件比较大,可能会造成内存溢出.因此如果文件比较大,应该是Alamofire.download方法,把数据临时的保存在磁盘中,该方法同时还支持后台下载.例如Alamofire.download("https://htt

HTML+JS实现下载图片到本地 - HelloWorld