我有一个功能,我需要使用一些多边形和标记来渲染传单地图。我能够使用domtoimage并能够使用以下代码将整个地图提取为图像
await new Promise(resolve => tileLayer.on("load", () => resolve()));
const dataURL = await domtoimage.toPng(mapElement, { width: map_data["size"]["x"], height: map_data["size"]["y"] });
const imgElement = document.createElement("img");
imgElement.src = dataURL;
document.body.appendChild(imgElement);
var link = document.createElement('a');
link.download = 'leaflet_plot_extract.png';
link.href = dataURL;
link.click();
现在我们使用WebGL Heatmap添加热图。这会将热图呈现为地图元素中的画布。domtoimage 功能无法获取嵌套画布并生成图像。domtoimage 文档说明了嵌套画布的以下内容:
如果您要渲染的 DOM 节点包含一个在其上绘制的元素,则应该对其进行处理,除非画布被污染 - 在这种情况下,渲染将不会成功。
有什么方法可以使用热图数据从传单地图中生成图像?