html5-canvas - 是否可以将 Openstreets 地图（传单）保存为图像

Question

我正在使用带有 openstreetmaps 的传单在 Ext js 面板上生成地图。
由于地图在 openstreet 地图中以图块的形式出现，因此我需要将这些图块组合起来以创建单个图像以另存为图像。

Answer 1

您可以使用此资源将 Leaflet Map 保存为 PNG 文件

使用 Javascript 和 PHP 将传单地图保存到 PNG 示例

Answer 2

我使用所谓的Tile Stitching方法（服务器端）来执行此操作。步骤是：

• 在客户端收集文档中的所有平铺图像，例如使用 jQuery，您可以执行以下操作：

  $('[class^="leaflet-tile leaflet-tile-loaded"]')
  

这将为您提供一个数组，其中包含地图瓦片的所有 img 元素。

• 获取图像的宽度和高度、x 和 y 以及 url 并放入您喜欢的数据结构

• 将数据结构发送到服务器上的函数，该函数将检索 url 并使用 x、y、width、height 属性将图像拼接在一起。

我从这篇与 openlayers 一起使用的文章中得到了这个想法：http: //trac.osgeo.org/openlayers/wiki/TileStitchingPrinting。在本文中，您将找到一个有效的 php 示例。使用 Leaflet 的 javascript 部分上方的信息应该不难。

Answer 3

这似乎对我有用：

http://www.yncoder.com/save-leaflet-map-as-image/

var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].setAttribute('crossOrigin', 'anonymous');
    images[i].src = images[i].src;
}

var canvas  = document.getElementById('dumb');
var context = canvas.getContext('2d');

canvas.width  = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

for (i = 0; i < images.length; i++) {
    if (typeof images[i] != 'undefined') {
        context.drawImage(images[i],
            images[i].style.left.slice(0, -2), // slice off 'px' from end of str
            images[i].style.top.slice(0, -2),
            images[i].clientWidth,
            images[i].clientHeight
        );
    }
}

window.open(canvas.toDataURL());