如何用javascript“截取”小册子地图到base64？

Question

我有一张传单地图，上面有一些线条和一些形状。我想点击一个按钮，允许我“截图”传单地图中的内容并输出图像的base64编码表示。我如何/有办法做到这一点？

Answer 1

这非常复杂。首先阅读https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas。归结为在<foreignObject>内创建<svg>，在<foreignObject>内部克隆DOM的一部分，然后为Blob创建<svg>，获取该blob的URL，将其加载到<img>，最后访问其像素信息。

当您完成阅读时，请获取包含您的传单地图的<div>并应用所描述的方法。

AFAIK，还没有实现这种技术的Leaflet插件 - 当前的打印/截图插件使用较旧的技术。

Answer 2

有leaflet-image（演示currently broken），仅适用于基于画布的图层。任何HTML（缩放控件，L.DivIcon，属性等）都不会显示在保存的图像中。