點擊a標簽下載當前鏈接的圖片&&js 通過 blob 類文件對象下載圖片，修改圖片保存的名字（兼容式寫法）

若想點擊a標簽就下載當前鏈接的圖片，首先必須文件是同源的，在a標簽上增加download屬性，才能觸發點擊下載的效果，若不同源的話則變成在當前頁面打開該圖片了。

若想要下載不同源的文件，有一種思路是將圖片轉為base64再賦值給a標簽，這樣點擊后應該就能夠下載了

問題：通過a標簽下載圖片，只有谷歌瀏覽器和火狐瀏覽器才支持

通過iframe的方式下載圖片的時候，不能夠修改圖片的名字。
解決思路：

1、因為圖片地址是跨域的，所以先要轉成 base64 數據流

2、然后把 base64 轉換成 blob對象

3、然后判斷瀏覽器的類型，選擇不同的方式把 blob 文件流下載到本地

 轉換成base64的方法

convertUrlToBase64(url) {
return new Promise(function(resolve, reject) {
var img = new Image();
img.crossOrigin = "Anonymous";
img.src = url;
img.onload = function() {
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);
var base64 = {
dataURL: dataURL,
type: "image/" + ext,
ext: ext
};
resolve(base64);
};
});
},

 

 轉換成 blob 對象

convertBase64UrlToBlob(base64) {
var parts = base64.dataURL.split(";base64,");
var contentType = parts[0].split(":")[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; i++) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
},

 

 判斷瀏覽器的類型

myBrowser() {
var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
if (userAgent.indexOf("OPR") > -1) {
return "Opera";
} //判斷是否Opera瀏覽器 OPR/43.0.2442.991
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判斷是否Firefox瀏覽器  Firefox/51.0
if (userAgent.indexOf("Trident") > -1) {
return "IE";
} //判斷是否IE瀏覽器 Trident/7.0; rv:11.0
if (userAgent.indexOf("Edge") > -1) {
return "Edge";
} //判斷是否Edge瀏覽器 Edge/14.14393
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
} // Chrome/56.0.2924.87
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判斷是否Safari瀏覽器 AppleWebKit/534.57.2 Version/5.1.7 Safari/534.57.2
},

 

 把獲取的地址傳入上面的方法，然后判斷瀏覽器的類型，
選擇兼容的下載 blob 文件流的方法

//圖片格式和PDF
this.convertUrlToBase64(url).then(function(base64) {
// 圖片轉為base64
var blob = that.convertBase64UrlToBlob(base64); // 轉為blob對象
// 下載
if (that.myBrowser() == "IE") {
window.navigator.msSaveBlob(blob, name + ".jpg");
} else if (that.myBrowser() == "FF") {
window.location.href = url;
} else {
var a = document.createElement("a");
a.download = name;
a.href = URL.createObjectURL(blob);
a.click();
}
});

 

 
————————————————
版權聲明：本文為CSDN博主「時間飛逝子非魚」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lgysjfs/article/details/88644837