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

我正在使用带有openstreetmaps的传单在Ext js面板上生成地图。

---

由于地图在openstreet地图中以分幅形式出现，我需要组合这些分幅来创建一个图像，以便另存为图像。

您可以使用

使用Javascript和PHP将传单映射保存到PNG示例

---

我使用所谓的平铺缝合方法（服务器端）来实现这一点。步骤如下：

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

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

这将为您提供一个包含地图分幅的所有img元素的数组

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

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

---

我从这篇与openlayers一起使用的文章中得到了这个想法：。在本文中，您将发现一个可用的php示例。在传单中使用javascript部分上面的信息应该不难。

这似乎对我很有用：

var-images=container.getElementsByTagName（'img'）；
对于（var i=0；i

谢谢，伙计，我尝试了这个演示，但实际上它显示了一些错误。实际上，当单击演示中提到的保存按钮时触发的url不存在。它显示404错误。试图激发的url为。但即使是html2canvas.appspot.com也不存在。这是因为跨源资源共享策略拒绝跨源图像加载。您在哪一部分获得跨源图像？您可以在不使用PHP的情况下尝试屏幕截图部分（html2canvas）。一旦第一部分开始工作，就可以在方便的时候设置PHP部分，以避免交叉源代码。

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());