在最近的開發當中,我們需要為img標簽以及canvas動態繪制的圖像提供下載功能,下面是經過探索后我們得出的結果。
一、Canvas 版本
// 下載Canvas元素的圖片 function downloadCanvasIamge(selector, name) { // 通過選擇器獲取canvas元素 var canvas = document.querySelector(selector) // 使用toDataURL方法將圖像轉換被base64編碼的URL字符串 var url = canvas.toDataURL('image/png') // 生成一個a元素 var a = document.createElement('a') // 創建一個單擊事件 var event = new MouseEvent('click') // 將a的download屬性設置為我們想要下載的圖片名稱,若name不存在則使用‘下載圖片名稱’作為默認名稱 a.download = name || '下載圖片名稱' // 將生成的URL設置為a.href屬性 a.href = url // 觸發a的單擊事件 a.dispatchEvent(event) } // 調用方式 // 參數一: 選擇器,代表canvas // 參數二: 圖片名稱,可選 downloadCanvasIamge('canvas', '圖片名稱')
二、img 標簽版本
// 下載 function downloadIamge(selector, name) { // 通過選擇器獲取img元素 var img = document.querySelector(selector) // 將圖片的src屬性作為URL地址 var url = img.src var a = document.createElement('a') var event = new MouseEvent('click') a.download = name || '下載圖片名稱' a.href = url a.dispatchEvent(event) } // 調用方式 // 參數一: 選擇器,代表img標簽 // 參數二: 圖片名稱,可選 downloadIamge('canvas', '圖片名稱')
改進版
由於跨域會導致a標簽在部分瀏覽器中會直接打開新標簽頁,所以改進如下
function downloadIamge(selector, name) { var image = new Image() // 解決跨域 Canvas 污染問題 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { var canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height var context = canvas.getContext('2d') context.drawImage(image, 0, 0, image.width, image.height) var url = canvas.toDataURL('image/png') // 生成一個a元素 var a = document.createElement('a') // 創建一個單擊事件 var event = new MouseEvent('click') // 將a的download屬性設置為我們想要下載的圖片名稱,若name不存在則使用‘下載圖片名稱’作為默認名稱 a.download = name || '下載圖片名稱' // 將生成的URL設置為a.href屬性 a.href = url // 觸發a的單擊事件 a.dispatchEvent(event) } image.src = document.querySelector(selector).src } // 調用方式 // 參數一: 選擇器,代表img標簽 // 參數二: 圖片名稱,可選 downloadIamge('canvas', '圖片名稱')
三、總結
我們主要使用的是a標簽的download屬性, 下面為MDN給出的說明:
此屬性指示瀏覽器下載URL而不是導航到URL,因此將提示用戶將其保存為本地文件。
如果屬性有一個值,它將在保存提示中用作預先填寫的文件名 (用戶仍然可以根據需要更改文件名)。對允許的值沒有限制,但是/和\被轉換為下划線。大多數文件系統限制文件名中的一些標點符號,瀏覽器會相應地調整建議的名稱。
需要注意的地方:
- 此屬性僅適用於同源 URLs。
- 可以使用 blob: URLs 和 data: URLs 以方便用戶下載 JavaScript 方式生成的內容(例如使用在線繪圖的Web應用創建的照片)。
- 如果HTTP頭的Content-Disposition:存在,並且賦予了一個和這個屬性不同的文件名,HTTP頭優先於此屬性。
- 如果這個屬性存在 Content-Disposition 被設置為 inline,火狐優先 Content-Disposition,像之前文件名的情況下,而Chrome則優先 download 屬性。
參考地址:
- MDN a標簽的說明:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
- MDN 關於toDataURL 說明: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
- 原文地址:https://www.cnblogs.com/zhangkaiqiang/p/8183926.html (感謝!)
js兼容IE下載圖片在本地
$("#tab1").bindChildEvent("#download",function(){ var imgPathURL=$("#div_edit_image_views #image").attr("src"); if(imgPathURL){ oDownLoad(imgPathURL); }else{ $.jAlert("二維碼圖片為空"); } }); //判斷瀏覽器類型 function myBrowser(){ var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" }; //判斷是否Opera瀏覽器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判斷是否Firefox瀏覽器 if (userAgent.indexOf("Chrome") > -1){ return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { return "Safari"; } //判斷是否Safari瀏覽器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; }; //判斷是否IE瀏覽器 if (userAgent.indexOf("Trident") > -1) { return "Edge"; } //判斷是否Edge瀏覽器 } //IE瀏覽器圖片保存本地 function SaveAs5(imgURL) { var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == "complete")break; } oPop.document.execCommand("SaveAs"); oPop.close(); } function oDownLoad(url) { if (myBrowser()==="IE"||myBrowser()==="Edge"){ SaveAs5(url); }else{ download(url); } } //谷歌,360極速等瀏覽器下載 function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null); $a.dispatchEvent(evObj); };