很多網站上，都有一個點擊圖片或點擊某個鏈接會將指定的圖片下載到本地的功能，而這個功能就需要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