[英]How to “screenshot” leaflet map to base64 with javascript?
I have a leaflet map with some lines and some shapes on it. 我有一张传单地图,上面有一些线和一些形状。 I want to click a button that allows me to "screenshot" what is in the leaflet map and output a base64 encoded representation of the image. 我想单击一个按钮,使我可以“截图”传单地图中的内容,并输出图像的base64编码表示形式。 How do I/ is there a way to do this? 我/有什么方法可以做到这一点?
It's very complicated. 非常复杂。 Start by reading https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas . 首先阅读https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas 。 It boils down to creating a <foreignObject>
inside a <svg>
, cloning a part of the DOM inside that <foreignObject>
, then create a Blob
for the <svg>
, get a URL for that blob, load it into a <img>
, and finally access its pixel info. 它归结为创建<foreignObject>
内的<svg>
克隆内的DOM的一部分<foreignObject>
然后创建一个Blob
为<svg>
这应该是团块的URL,将其加载到<img>
,最后访问其像素信息。
When you're done reading, fetch the <div>
that contains your leaflet map and apply the method described. 阅读完毕后,获取包含传单地图的<div>
并应用所描述的方法。
AFAIK, there is no Leaflet plugin that implements this technique (yet) - the current print/screenshot plugins use older techniques. AFAIK,尚无实现此技术的Leaflet插件(尚未)-当前的打印/屏幕截图插件使用较旧的技术。
There is leaflet-image (demo currently broken ), which only works for canvas-based layers. 有传单图像 (演示目前已中断 ),仅适用于基于画布的图层。 Anything HTML (Zoom control, L.DivIcon, attribution etc.) will not show up in the saved image. HTML的任何内容(缩放控件,L.DivIcon,属性等)都不会显示在已保存的图像中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.