Question

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

x ：默认：元素x偏移量描述：裁剪画布x坐标
y ：默认：元素y偏移说明：裁剪画布y坐标

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

因此，我尝试捕获整个窗口，然后使用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绘制的：onmousedown和onmouseup。因为矩形是正确绘制的，所以我假设我的坐标是正确的。但是，当我将这些坐标传递到上面的函数snapImage()时，会得到以下捕获的图像：

好像有一个偏移量。也许起始坐标drawImage()的操作与我的画布起始坐标不同？

编辑：

结果表明，当我进行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);
    });
}

Answer 2

结果是，有一个内置的Chrome功能captureVisibleTab可以捕获活动选项卡的图像。因此，我最终使用了该名称，而不是html2canvas。我从Copyfish Chrome Extension获得了帮助。 Github代码在这里：Copyfish。

这是我的代码：

监听器：

//listener in background.js which invokes the screen capture
chrome.tabs.captureVisibleTab(function (dataURL) {
    sendResponse({
            dataURL: dataURL,
    });
});

接收器：

//receiver in content.js which gets the captured image and crops it accordingly
function(response){
    var img = new Image();
    img.src = response.dataURL;
    var dpf = window.innerWidth / img.width;
    var scaleFactor = 1 / dpf,
    sx = Math.min(x1, x2) * scaleFactor,
    sy = Math.min(y1, y2) * scaleFactor,
    width = Math.abs(x2 - x1),
    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
    var avatarCtx = avatarCanvas.getContext('2d');
    avatarCtx.drawImage(img, sx, sy, scaledWidth, scaledHeight, 0, 0, width, height);
}

x,y坐标分别由e.clientX和e.clientY获取。

此方法可实现缩放和分辨率验证。

如何使用带有坐标的html2canvas？

2 个答案: