// 聲明一個畫布元素,存儲需下載圖片范圍
let canvas = document.createElement("canvas");
// 獲取需下載范圍元素
let img = this.$refs["QRcodeSrcImg"];
// 圖片高度
var w = parseInt(window.getComputedStyle(img).width);
// 圖片寬度
var h = parseInt(window.getComputedStyle(img).height);
// 聲明畫布寬高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 利用 html2canvas 下載 canvas
html2canvas(img, { canvas: canvas }).then(function(canvas) {
const a = document.createElement("a");
// 文件名
a.download = name | 'html2canvas';
// 設(shè)置 a href 屬性
a.setAttribute("href", canvas.toDataURL());
// 觸發(fā) a 點(diǎn)擊事件
a.click();
});
如果需下載圖片范圍中存在從服務(wù)器獲取到的圖片烛卧，則需要把圖片轉(zhuǎn)換成base64格式才可以下載抄邀，不然下載的圖片會出現(xiàn)空白
圖片轉(zhuǎn)base64
// 圖片下載
var image = new Image();
// 如果圖片是跨域的缀辩，填上"*"或者"anonymous" 核心是請求頭中包含了 Origin: "anonymous"或"*" 字段荆残，
//響應(yīng)頭中就會附加上 Access-Control-Allow-Origin: * 字段,
image.crossOrigin = "anonymous"; image.src = url;
// 路徑加載
image.onload = function() {
var ext = url.substring(url.lastIndexOf(".") + 1);
var base64 = getBase64Image(image, ext);
_this.QRcodeSrc = base64;
};
// 圖片轉(zhuǎn) base64 格式
function getBase64Image(image, ext) {
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 base64 = canvas.toDataURL("image/" + ext);
return base64;
}
