Leaflet Circle 未保存到画布图像答案

【问题标题】：Leaflet Circle is not saving to canvas imageLeaflet Circle 未保存到画布图像
【发布时间】：2016-04-25 12:52:46
【问题描述】：

我正在使用传单地图并为 10,20 和 30 公里创建传单圆半径。圆圈已创建，但我尝试为 html2canvas 函数保存图像。所以传单地图（标记）只保存但圆圈不保存画布图像。

传单圈功能：

    circle3 = L.circle(pointA, ( 30 * 1000), { color: 'red', fillOpacity: 0.07 ,fill:false,weight: 2});
    circle2 = L.circle(pointA, ( 20 * 1000), { color: 'green', fillOpacity: 0.07 ,fill:false,weight: 2});
    circle1 = L.circle(pointA, ( 10 * 1000), { color: 'blue', fillOpacity: 0.07 ,fill:false,weight: 2});

    circles.addLayer(circle3);
    circles.addLayer(circle2);
    circles.addLayer(circle1);
    map.addLayer(circles);

html2canvas 函数：

html2canvas($('#map'), {
            allowTaint : false,
            logging : true,
            taintTest: false,
            useCORS: true,
            onrendered: function(canvas) {

            // canvas is the final rendered <canvas> element
            dataURL = canvas.toDataURL("image/png");

            //map.panBy([100, 100]);

            var dimensions = map.getSize();
            img.width = dimensions.x;
            img.height = dimensions.y;
            img.src = canvas.toDataURL();
            sample3.innerHTML = '';
            sample3.appendChild(img);
        }
        });

请帮助我。谢谢...

【问题讨论】：

标签： javascript leaflet html2canvas

【解决方案1】：

请注意，html2canvas 无法自行转换 SVG。

您应该在加载 Leaflet 之前尝试设置 L_PREFER_CANVAS 全局开关，以便您的圈子直接呈现为 Canvas 而不是 SVG。那么html2canvas应该可以使用了。

否则，您可以在申请html2canvas之前尝试寻找其他关于将SVG转换为画布的帖子。

【讨论】：