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

A 标签的 download 属性

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

语法：

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

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

HTML代码：

<a 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 中新增的属性

mg标签的应用场景

我们平时在浏览网站的过程中如果只有文字的话难免会有些太单调了，并且看文字多了眼睛也会比较难受，这时我们想要让我们的网页更漂亮更吸引人眼球，那么肯定少不了精美的图片来进行点缀，这就用到了今天我要教给大家的图像标签img。

img标签的组成

src：图片的路径 这个是必须要有的

title：当我们把鼠标移动到图片上展示的文本内容

alt：当图片的路径错误或图片有问题时浏览器无法识别渲染的情况下展示的文本内容

width：设置图片的宽度

height：设置图片的高度

img标签的使用

以上就是img图片标签的简单应用

TML图像标记

常用的图像格式—GIF，PNG，JPG
图像标记<img />
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。其基本语法格式如下：

<img src="图像URL" />

该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。

相对路径和绝对路径

相对路径
相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。
例如：

<img src="img/logo.gif" alt="传智播客-专业的java培训,.net培训,php培训,网页培训,平面培训,iOS培训机构" />

相对路径设置分为以下三种：

图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如<img src="logo.gif" />。

图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="img/img01/logo.gif" />。

图像文件位于html文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如<img src="../logo.gif" />。

绝对路径

绝对路径一般是指带有盘符的路径。

例如：

“D:\HTML+CSS网页制作\chapter02\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

原文链接：https://blog.csdn.net/dubaiqaq/article/details/103500345