必須同源(訪問的網(wǎng)站域名與服務(wù)器域名一致)才能下載:
downs() {
? var alink = document.createElement("a");
? alink.href = this.shop.shoppic_url;
? alink.download = "pic"; //圖片名
? alink.click();
},
解決圖片不同源下載問題:
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"); // 生成一個(gè)a元素
? ? var event = new MouseEvent("click"); // 創(chuàng)建一個(gè)單擊事件
? ? a.download = name || "photo"; // 設(shè)置圖片名稱
? ? a.href = url; // 將生成的URL設(shè)置為a.href屬性
? ? a.dispatchEvent(event); // 觸發(fā)a的單擊事件
? };
? image.src = imgsrc;
},
downs(){
? this.downloadIamge(this.pic.url, 'pic')
————————————————
版權(quán)聲明:本文為CSDN博主「bamboozjy」的原創(chuàng)文章肌蜻,遵循CC 4.0 BY-SA版權(quán)協(xié)議互墓,轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/bamboozjy/article/details/81631487