安装
yarn add html2canvas
引入
import html2canvas from 'html2canvas'
使用
<div id="map" class="map" ref="map"></div>
html2canvas(document.getElementById("map"), {
logging: true,
useCORS: true,
foreignObjectRendering: false,
allowTaint: false,
}).then((canvas) => {
var dataUrl = canvas.toDataURL();
var a = document.createElement("a");
a.setAttribute("href", dataUrl);
a.setAttribute("download", "image.png");
document.body.appendChild(a);
a.click();
a.remove();
});
常用配置项
allowTaint false 是否允许跨源图像污染画布
useCORS false 是否尝试使用CORS从服务器加载图像
logging true 为调试目的启用日志记录
踩坑记录
截图出来的是白屏,首先确认useCORS为true,如果是截屏地图可以参考下Unable to clone WebGL context as it has preserveDrawingBuffer=false-CSDN博客