将传单地图片段转换为图像答案

【问题标题】：Convert leaflet map snippet to image将传单地图片段转换为图像
【发布时间】：2014-07-26 05:54:17
【问题描述】：

我需要将包含传单地图的页面导出为 pdf。我试图将地图容器转换为图像，但效果不佳。我使用的代码在这里 http://jsfiddle.net/Sq7hg/2/

html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
    console.log(data)
    // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

    var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
}

});

此代码不适用于传单地图。我该如何实现？

【问题讨论】：

标签： pdf-generation leaflet html-to-pdf

【解决方案1】：

我在导出带有特殊标记的传单地图时遇到问题，我尝试使用插件leaflet-image，但它仅适用于标准标记。

最后我在服务器（节点）中创建了地图。

我写了一篇文章，如何将传单地图导出为pdf，请参见下面的链接

Export leaflet map to pdf report

【讨论】：

【解决方案2】：

我认为你最好使用leaflet-image 插件，它就是这样做的。有一个从标题链接的演示。主要问题是强制 Leaflet 使用画布进行渲染。

【讨论】：

谢谢llja ..我试过这个。但它只有在没有标记时才有效。当标记被添加到地图时，这个错误会出现在控制台'Uncaught TypeError：无法读取属性'0 '未定义的'
太棒了..它工作了.. :) 之前没有定义标记大小，这就是错误的原因..现在它完美了..谢谢llja..
这个插件有像d3-queue这样的依赖吗？
它有依赖项（请参阅package.json），但您可以使用存储库中的预构建缩小版本（请参阅文档）。