如何使用图层下载地图的传单图像

Question

我正在尝试使用leaflet-image插件获取快照。 我收到了这个错误：

leaflet-image.js:195 Element could not be drawn on canvas <svg class=​"leaflet-zoom-animated" width=​"1220" height=​"790" viewBox=​"-24 -16 1220 790" style=​"transform:​ translate3d(-24px, -16px, 0px)​;​">​…​</svg>​handlePathRoot @ leaflet-image.js:195start @ leaflet-image.js:336poke @ leaflet-image.js:324(anonymous function) @ leaflet-image.js:352tileQueueFinish @ leaflet-image.js:172maybeNotify @ leaflet-image.js:377(anonymous function) @ leaflet-image.js:353im.onload @ leaflet-image.js:148

当我将图层加载到地图（as the attached image）

时，就会发生这种情况

感谢任何帮助。

Answer 1

图片很可能没有CORS标头，<canvas>使用的leaflet-image.js HTML元素正在受到污染。

问题中详细记录了此问题：«Cross-origin data in HTML5 canvas»和«Canvas image crossplatform insecure error»。最终，您必须确保在您从中获取图像的Web服务器中启用了CORS。