Leaflet.js 支持 translate3d 的客户端截图

Question

美好的一天！我正在尝试使用 html 栅格化生成传单地图的屏幕截图。使用 translate3d 和 scale（硬件加速）库 canvg 和 html2canvas 的原因不能给我好的结果。有人知道我应该怎么做才能拍摄 html 屏幕截图吗？首先，作为绘画瓷砖 - 好的（但这只是幸运，因为 html2canvas 将 translate[0] 作为 x，将 translate[1] 作为 y。如果图层有比例 - 它给了我错误的位置）

可能有解决这个问题的脚本？

Answer 1

以下是class方法地图 - 是通常的地图， mainpane - 是克隆的地图容器， ctx - 主要 canvas 上下文：

    var mainpane = $(map.getContainer()).clone();
    var mapPane = mainpane.find(".leaflet-map-pane")[0];
    var mapTransform = mapPane.style.transform.split(",");
    this.mapX = parseFloat(mapTransform[0].split("(")[1].replace("px", ""));
    this.mapY = parseFloat(mapTransform[1].replace("px", ""));
    var canvas = document.createElement("canvas");
    canvas.className = "screenShotCanvas";
    canvas.width = map.getSize().x;
    canvas.height = map.getSize().y;
    canvas.style.left = -this.mapX;
    canvas.style.top = -this.mapY;
    var ctx = canvas.getContext("2d");



drawSVGOnCanvas: function(map, mainpane, ctx) {
    var overlayClass = $(map.getPanes().overlayPane).attr('class');
    var svgE = mainpane.find('.' + overlayClass.replace(' ', '.')).find('svg');
    var xml;
    var svgElements = svgE[0];
    var svgElementsTransform = svgElements.style.transform.split(",");
    var svgElementsX = parseFloat(svgElementsTransform[0].split("(")[1].replace("px", ""));
    var svgElementsY = parseFloat(svgElementsTransform[1].replace("px", ""));
    svgElements.style.transform = " ";
    svgElements.style.left = svgElementsX + "px";
    svgElements.style.top = svgElementsY + "px";

    var svgCanvas = document.createElement("canvas");
    svgCanvas.className = "screenShotTempCanvas";
    svgCanvas.id = "SvgToCanvas";
    svgCanvas.width = map.getSize().x;
    svgCanvas.height = map.getSize().y;
    var svgCtx = svgCanvas.getContext("2d");

    svgE.each(function() {
        L.DomUtil.getPosition(svgE);
        xml = new XMLSerializer().serializeToString(this);
        canvg(svgCanvas, xml);
    });
    ctx.drawImage(svgCanvas, svgElementsX + that.mapX, svgElementsY + that.mapY);
},

Answer 2

感谢Triple-B，我做了类似的事情。

        var that  = this,
            map_c = that.map.getContainer();

        //Check if have svg on map
        var svg     =  map_c.querySelector('svg');
        var _canvas = map_c.querySelector('canvas');

        if(svg) {

            var svg_attr = {
                w: parseInt(svg.attributes.width.value),
                h: parseInt(svg.attributes.height.value)
            };

            _canvas.width  = svg_attr.w;
            _canvas.height = svg_attr.h;

            _canvas.style.display = 'block';

            var serializer = new XMLSerializer();

            var c   = _canvas;
            var ctx = c.getContext('2d');
            ctx.clearRect(0, 0, svg_attr.w, svg_attr.h);

            var trans_val = map_c.querySelector('.leaflet-map-pane').style['transform'].replace('translate','').replace(/px/g,'').replace('(','').replace(')','').split(',');

            var trans_y = parseInt(trans_val[trans_val.length - 1]) ,
                trans_x = parseInt(trans_val[trans_val.length - 2]);


            ctx.translate(trans_x,trans_y);
            ctx.drawSvg("<svg>"+serializer.serializeToString(svg)+"</svg>", 0, 0, svg_attr.w, svg_attr.h);
            svg.style.display = 'none';
        }

Leaflet.js 支持 translate3d 的客户端截图

Leaflet.js client-syde screenshot whit support of translate 3d

canvas

svg

3d

leaflet

hardware-acceleration