1，下載html2canvas插件

npm install --save html2canvas

2，引入html2canvas

import html2canvas from 'html2canvas';

1，圖片的格式轉換

public dataURLToBlob(dataurl: any): any {

const arr = dataurl.split(',');

const mime = arr[0].match(/:(.*?);/)[1];

const bstr = atob(arr[1]);

let n = bstr.length;

const u8arr = new Uint8Array(n);

while (n--) {

u8arr[n] = bstr.charCodeAt(n);

}

return new Blob([u8arr], { type: mime });

}

2，對dom生成圖片

public saveImage(imgText: string): any {

const canvasID: any = document.getElementById('map-container');

// let that = this;

const a = document.createElement('a');

const opts = {

tainttest: true, // 檢測每張圖片都已經加載完成

useCORS: true, // 跨域處理，可以加載網絡圖片

logging: true, // 日志開關

};

html2canvas(canvasID, opts).then((canvas) => {

const dom = document.body.appendChild(canvas);

dom.style.display = 'none';

a.style.display = 'none';

document.body.removeChild(dom);

const blob = this.dataURLToBlob(dom.toDataURL('image/png'));

a.setAttribute('href', URL.createObjectURL(blob));

// 這塊是保存圖片操作 可以設置保存的圖片的信息

a.setAttribute('download', imgText + '.png');

document.body.appendChild(a);

a.click();

URL.revokeObjectURL(blob);

document.body.removeChild(a);

});

}

注意：

對于處理地圖的衛星地圖圖層還有一些跨域圖片來說一定要寫useCORS: true，useCORS這個屬性主要是處理網絡圖片

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue html2canvas用法,vue中html2canvas的使用（地图截图）的全部內容，希望文章能夠幫你解決所遇到的問題。

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