方法一:使用a標簽的download屬性。

<a href="1.jpg" download="1.jpg">下載圖片</a>

注意：
實現點擊下載的前提是要下載的圖片是同源的，非IE瀏覽器中會直接跳轉到該圖片的預覽地址

方法二: vue中點擊觸發方法下載圖片

<img :src="codeImg" alt="二維碼圖片" style="width:60%;"> <span @click="downloadCodeImg()"></span>引入圖片 import codeIMG from '@/assets/code.jpg';data中，設置圖片變量 data(){codeImg:codeIMG, }downloadCodeimg方法methods: {downloadCodeImg(){console.log('下載圖片')var a = document.createElement('a')a.download = name || 'pic'// 設置圖片地址a.href = codeIMG;a.click();}, }

注意：這里有一個坑。如果你的圖片是從后臺請求過來的，如果你的a標簽的href是IP地址的話，此時a標簽的download屬性會失效，a會被當成一個普通的鏈接使用。

解決方法一：將IP地址換成域名。

解決方法二：通過后端轉發，后端請求第三方資源，返回給前端，前端再保存文件。

方法三: canvas與image互轉及圖片下載

//canvas轉圖片canvasToImage (canvas) {let image = new Image();image.src = canvas.toDataURL('image/png');return image;}//圖片轉canvasimageToCanvas (image) {let canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;canvas.getContext('2d').drawImage(image, 0, 0)}//圖片轉化base64var img = "imgurl";//imgurl 就是你的圖片路徑 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase(); var dataURL = canvas.toDataURL("image/"+ext); return dataURL; } var image = new Image(); image.src = img; image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } //圖片下載imageDownLoad (image) {let aLink = document.createElement('a');aLink.href = image.src;aLink.download = 'test.png';document.body.appendChild(aLink);aLink.click();document.body.removeChild(aLink)}

canvas標簽是可以右鍵保存的，但是這樣還是不夠友好，如果點擊按鈕下載，那就最好不過了
思路：

• a標簽可以下載資源的
• 只要把canvas轉成base64的格式放在href里就好了

實現1：

<a href="" download="test" id="download">下載</a> <script>var dataURL = canvas.toDataURL("image/png");var a = document.getElementById("download");a.setAttribute("href",dataURL); </script>

實現2：
1.由button觸發事件 創建一個a標簽
2.a標簽 綁定事件流，觸發點擊事件

<button onclick="download()">下載</button> <script>var saveFile = function(data, filename){var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');save_link.href = data;save_link.download = filename;var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);save_link.dispatchEvent(event);}function download(){var dataURL = canvas.toDataURL("image/png");saveFile(dataURL,'test.jpg');} </script>

方法四: 圖片都轉成base64解決跨域問題

方法一：Blob和FileReader 對象
實現原理：
使用xhr請求圖片,并設置返回的文件類型為Blob對象[xhr.responseType = “blob”]
使用FileReader 對象接收blob

<p id="container1"></p><script>getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")function getBase64(imgUrl) {window.URL = window.URL || window.webkitURL;var xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);// 至關重要xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//得到一個blob對象var blob = this.response;console.log("blob", blob)// 至關重要let oFileReader = new FileReader();oFileReader.onloadend = function (e) {let base64 = e.target.result;console.log("方式一》》》》》》》》》", base64)};oFileReader.readAsDataURL(blob);//====為了在頁面顯示圖片，可以刪除====var img = document.createElement("img");img.onload = function (e) {window.URL.revokeObjectURL(img.src); // 清除釋放};let src = window.URL.createObjectURL(blob);img.src = srcdocument.getElementById("container1").appendChild(img);//====為了在頁面顯示圖片，可以刪除====}}xhr.send();}</script>

方式二：canvas.toDataURL()方法

實現原理：
使用canvas.toDataURL()方法
需要解決圖片跨域問題 image.crossOrigin = ‘’;
使用了Jquery庫的$.Deferred()方法

<p id="container2"></p><script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script>let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";//width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小function getBase64Image(img, width, height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL;}function getCanvasBase64(img) {var image = new Image();//至關重要image.crossOrigin = '';image.src = img;//至關重要var deferred = $.Deferred();if (img) {image.onload = function () {deferred.resolve(getBase64Image(image));//將base64傳給done上傳處理document.getElementById("container2").appendChild(image);}return deferred.promise();//問題要讓onload完成后再return sessionStorage['imgTest']}}getCanvasBase64(imgSrc).then(function (base64) {console.log("方式二》》》》》》》》》",base64);}, function (err) {console.log(err);});</script>

總結

以上是生活随笔為你收集整理的前端实现点击下载图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。