如何将 Leaflet map 的 dom-to-image 捕获与地图边界对齐？

Question

I'm working on a project in which i'm capturing map screenshot (using dom-to-image library ) and sending it to an external API which is returning back some coordinates(x,y,w,h) after processing the sent image. These co-ordinates(rectangles) i'm trying to draw on leaflet.

As the captured image size is bigger than width and height of captured area (don't know why) , I need to do scaling the co-ordinates.

Now the problem is Leaflet rectangles are not drawing on accurate position which external API is returning.

However, I'm sure that the external API is returning correct coordinates(x,y,w,h) with respect to sent image's width & height.

Something wrong i'm doing on scaling coordinates.

Below is the code snippet i'm trying:

domtoimage.toPng(document.querySelector("#map"))
    .then(function (dataUrl) {
        var boundsOnly = map.getBounds(); 
        let topLeft = boundsOnly.getNorthWest();
        let topRight = boundsOnly.getNorthEast();
        let bottomLeft = boundsOnly.getSouthWest();
        let bottomRight = boundsOnly.getSouthEast();
                
        var currBBOXpoints = { x1y1: map.latLngToLayerPoint(topLeft), 
                            x2y2: map.latLngToLayerPoint(topRight),
                            x3y3: map.latLngToLayerPoint(bottomRight),
                            x4y4: map.latLngToLayerPoint(bottomLeft) };
                            
        var pW = currBBOXpoints.x2y2.x - currBBOXpoints.x1y1.x;
        var pH = currBBOXpoints.x3y3.y - currBBOXpoints.x1y1.y;
        
        currBBOXpoints.pW = pW; //calculated the width of captured area
        currBBOXpoints.pH = pH; //calculated the height of captured area
        
        var i = new Image();
        i.onload = function () { //calculating captured image's actual width, height

            $.ajax({
                type: 'post',
                url: '/externalapi',
                data: JSON.stringify(dataUrl),
                contentType: "application/json",
                dataType: "json",
                success: function (resultData) {
                    resultData["iW"] = i.width; //captured image width 
                    resultData["iH"] = i.height; //captured image height
                    resultData["currBBOXpoints"] = currBBOXpoints; //captured area bounds
                    drawRects(resultData);
                    //NOTE: Captured image's width and height are bigger than width and height of captured area (don't know why)
                }
            });
    };
    i.src = dataUrl;
});

function drawRects(rectData) {

    var scale = Math.max(rectData.currBBOXpoints.pW / rectData['iW'], rectData.currBBOXpoints.pH / rectData['iH']);
    
    var shifted_x = rectData.currBBOXpoints.pW / 2 - rectData['iW'] / 2 * scale;
    var shifted_y = rectData.currBBOXpoints.pH / 2 - rectData['iH'] / 2 * scale;

    rectData.od.forEach(rc => {
        var modifiedX = Number(rc['x']) * scale + shifted_x;
        var modifiedY = Number(rc['y']) * scale + shifted_y; 
        var modifiedW = (modifiedX + rc['w'])
        var modifiedH = (modifiedY + rc['h'])


        let point3 = map.layerPointToLatLng(L.point(modifiedX, modifiedY));
        let point4 = map.layerPointToLatLng(L.point(modifiedW, modifiedH));
        
        var rectBounds = [[point3.lat, point3.lng], [point4.lat, point4.lng]];
        var boundingBox = L.rectangle(rectBounds, { color: "yellow", weight: 1, name: "rect", fillOpacity: 0.10 });
        
        map.addLayer(boundingBox);

    });
}

Answer 1

I can't say why but when you set the scale to 0.9 after defining x and y it matches perfect.

var scale = Math.max(currBBOXpoints.pW / imagesize.width, currBBOXpoints.pH / imagesize.height);

var x = currBBOXpoints.pW / 2 - imagesize.width / 2 * scale;
var y = currBBOXpoints.pH / 2 - imagesize.height / 2 * scale;
scale = 0.9

Also you have to set in the fiddle the css width and height:

#mapWrapper{
  padding: 10px;
  margin: 10px;
  width: 1744px;
  height: 854px;
}

Answer 2

This is an XY problem (which you successfully identified: the size of the capture is not the size of the map container), so let's fix the root problem instead.

It looks like dom-to-image aligns the top-left corner of the capture, but also takes into account the size of any overflowing elements (such as partially-visible map tiles on the southeast corner) when calculating the size of the capture:

(This can be proven by playing a bit with the browser's box model inspector , comparing the position & size of the southeasternmost tile with the size of the capture)

Since the capture is aligned top-left, you can just clip the capture to the size of the map canvas.

You can use the width and height options of dom-to-image together with the getSize method of L.Map to force clipping the captured image to the dimensions of the map canvas, eg:

    domtoimage.toPng(document.querySelector("#leaflet"), {
        width: map.getSize().x,
        height: map.getSize().y
    })

See a working demo .