javascript - 如何使用javascript将 "screenshot"传单映射到base64？

Question

我有一张传单 map ，上面有一些线条和一些形状。我想单击一个按钮，允许我“截取”传单 map 中的内容并输出图像的 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> ，获取该 blob 的 URL，将其加载到 <img> ，最后访问其像素信息。

读完后，获取 <div>包含您的传单 map 并应用所描述的方法。

据我所知，目前还没有 Leaflet 插件实现此技术 - 当前的打印/屏幕截图插件使用较旧的技术。