vue html2canvas用法,vue中html2canvas的使用（地图截图）

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这个属性主要是处理网络图片