Question

我正在使用Leaflet地图并创建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);
        }
        });

请帮帮我。感谢...

Answer 1

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

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

否则，您可以尝试在应用html2canvas之前查找有关将SVG转换为画布的其他帖子。

Leaflet Circle不保存到画布图像

1 个答案: