如何使用圖層下載地圖的傳單圖像

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標頭，並且leaflet-image.js使用的HTML元素被污染。

此問題在以下問題中有詳細記錄：«Cross-origin data in HTML5 canvas»和«Canvas image crossplatform insecure error»。最終，您必須確保在您從中提取映像的Web服務器中啓用了CORS。