javascript - 如何使用带有坐标的html2canvas？

Question

我正在尝试使用 html2canvas 在浏览器中捕获图像.捕获整个浏览器的图像是可行的。但我需要指定要捕获的 x,y 开始和结束坐标。 In the docs我看到 html2canvas 可以接受 x,y 坐标:

x: Default: Element x-offset Description: Crop canvas x-coordinate
y: Default: Element y-offset Description: Crop canvas y-coordinate

将我的 x,y 坐标传递给那些参数只会捕获整个窗口。

因此，我 try catch 整个窗口，然后使用 drawImage() 从中裁剪一个区域(在其他一些 stackoverflow 帖子中找到，不确定是哪个帖子):

function snapImage(x1,y1,x2,y2, e){
    html2canvas(document.body).then(function(canvas) {
        // calc the size -- but no larger than the html2canvas size!
        var width = Math.min(canvas.width,Math.abs(x2-x1));
        var height = Math.min(canvas.height,Math.abs(y2-y1));
        // create a new avatarCanvas with the specified size
        var avatarCanvas = document.createElement('canvas');
        avatarCanvas.width=width;
        avatarCanvas.height=height;
        avatarCanvas.id = 'avatarCanvas';
        // put avatarCanvas into document body
        document.body.appendChild(avatarCanvas);
        // use the clipping version of drawImage to draw
        // a clipped portion of html2canvas's canvas onto avatarCanvas
        var avatarCtx = avatarCanvas.getContext('2d');
        avatarCtx.drawImage(canvas,x1,y1,width,height,0,0,width,height);
    });
}

这会绘制偏移量错误的移位图像。例如，给定以下网站:

图片取自示例:https://github.com/niklasvh/html2canvas/tree/master/examples

我标记“pluot?”区域以捕捉它:

请看虚线矩形

虚线矩形是使用 js 绘制的，在 2 个事件中给定鼠标坐标:onmousedown 和 onmouseup。因为矩形绘制正确，我假设我的坐标是正确的。但是当我将这些坐标传递给上面的函数 snapImage() 时，我得到了以下捕获的图像:

看起来有一个偏移量。也许 drawImage() 操作的起始坐标与我的 Canvas 起始坐标不同？

---

编辑:

原来我的代码在 100% 缩放时有效。但当我放大/缩小时却没有。

Answer 1

我想这是因为您从带有 clientX 和 clientY 的事件中获得了 x 和 y。请改用 pageX 和 pageY。看看这个jsFiddle

let startX, startY;

document.getElementsByTagName('body')[0].addEventListener('mousedown', function(event) {
    console.log("ok");
    startX = Math.floor(event.pageX);
    startY = Math.floor(event.pageY);
});

document.getElementsByTagName('body')[0].addEventListener('mouseup', function(event) {
    snapImage(Math.min(event.pageX, startX), Math.min(event.pageY, startY), Math.max(event.pageX, startX), Math.max(event.pageY, startY));
});

function snapImage(x1,y1,x2,y2, e){
    console.log(x1, x2, y1, y2);
    html2canvas(document.body).then(function(canvas) {
        // calc the size -- but no larger than the html2canvas size!
        var width = Math.min(canvas.width,Math.abs(x2-x1));
        var height = Math.min(canvas.height,Math.abs(y2-y1));
        // create a new avatarCanvas with the specified size
        var avatarCanvas = document.createElement('canvas');
        avatarCanvas.width=width;
        avatarCanvas.height=height;
        avatarCanvas.id = 'avatarCanvas';
        // put avatarCanvas into document body
        document.body.appendChild(avatarCanvas);
        // use the clipping version of drawImage to draw
        // a clipped portion of html2canvas's canvas onto avatarCanvas
        var avatarCtx = avatarCanvas.getContext('2d');
        avatarCtx.drawImage(canvas,x1,y1,width,height,0,0,width,height);
    });
}