レイヤー付き地図のリーフレットイメージをダウンロードするには

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> HTML要素が汚染されている可能性があります。

この問題は、«Cross-origin data in HTML5 canvas»と«Canvas image crossplatform insecure error»という質問によく記載されています。最終的には、イメージを取り込んでいるCORSがWebサーバーで有効になっていることを確認する必要があります。