這里提供兩種圖片下載的方法
1. 直接由路徑下載
?downloadIamge(imgsrc,?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");?//得到圖片的base64編碼數(shù)據(jù)
??????var?a?=?document.createElement("a");?//?生成一個a元素
??????var?event?=?new?MouseEvent("click");?//?創(chuàng)建一個單擊事件
??????a.download?=?name?||?"photo";?//?設(shè)置圖片名稱
??????a.href?=?url;?//?將生成的URL設(shè)置為a.href屬性
??????a.dispatchEvent(event);?//?觸發(fā)a的單擊事件
??};
??image.src?=?imgsrc;
}
這種方法可以根據(jù)路徑下載同源和非同源的圖片 ，當(dāng)然前提是你的圖片能被跨域請求明未，這需要在服務(wù)端配置跨域請求
配置響應(yīng)頭
2.通過Base 64 下載圖片?
downBetyIamge?=(imgdata,?name)?=>{??//Bsae?64下載圖片
??????????????//?這里是獲取到的圖片base64編碼,這里只是個例子哈吴旋，要自行編碼圖片替換這里才能測試看到效果
??????const?imgUrl?=?"data:image/png;base64,"+?imgdata;
??????//?如果瀏覽器支持msSaveOrOpenBlob方法（也就是使用IE瀏覽器的時(shí)候），那么調(diào)用該方法去下載圖片
??????if?(window.navigator.msSaveOrOpenBlob)?{
????????let?bstr?=?atob(imgUrl.split(",")[1]);
????????let?n?=?bstr.length;
????????let?u8arr?=?new?Uint8Array(n);
????????while?(n--)?{
????????u8arr[n]?=?bstr.charCodeAt(n);
????????}
????????let?blob?=?new?Blob([u8arr]);
????????window.navigator.msSaveOrOpenBlob(blob,?name?+?"."?+?"png");
??????}?else?{
????????//?這里就按照chrome等新版瀏覽器來處理
????????let?a?=?document.createElement("a");
????????a.href?=?imgUrl;
????????a.setAttribute("download",?name);
????????a.click();
??????}
}
imgdata 是請求返回的64編碼?name為圖片名
