如何使用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>克隆内的DOM的一部分<foreignObject>然后创建一个Blob为<svg>这应该是团块的URL，将其加载到<img> ，最后访问其像素信息。

阅读完毕后，获取包含传单地图的<div>并应用所描述的方法。

AFAIK，尚无实现此技术的Leaflet插件（尚未）-当前的打印/屏幕截图插件使用较旧的技术。

Answer 2

有传单图像 （演示目前已中断 ），仅适用于基于画布的图层。 HTML的任何内容（缩放控件，L.DivIcon，属性等）都不会显示在已保存的图像中。