Javascript 如何使用带有坐标的html2canvas？

我正在尝试使用在浏览器中捕获图像。捕获整个浏览器的图像是可行的。但是我需要指定要捕获的

x，y

起始和结束坐标。我看到

html2canvas

可以接受

x，y

坐标：

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

将我的

x，y

坐标传递给这些参数只会捕获整个窗口

因此，我尝试捕获整个窗口，然后使用（在其他stackoverflow帖子中找到，不确定是哪个）：

函数snapImage（x1、y1、x2、y2、e）{
html2canvas（document.body）.then（函数（canvas）{
//计算大小——但不要大于html2canvas大小！
var-width=Math.min（canvas.width，Math.abs（x2-x1））；
var height=Math.min（canvas.height，Math.abs（y2-y1））；
//创建具有指定大小的新虚拟角色
var avatarCanvas=document.createElement（'canvas'）；
avatarCanvas.width=宽度；
avatarCanvas.height=高度；
avatarCanvas.id='avatarCanvas'；
//将avatarCanvas放入文档正文中
文件.正文.附件（avatarCanvas）；
//使用drawImage的剪裁版本进行绘制
//将html2canvas画布的一部分裁剪到avatarCanvas上
var avatarCtx=avatarCanvas.getContext（'2d'）；
avatarCtx.drawImage（画布，x1，y1，宽度，高度，0,0，宽度，高度）；
});
}

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

图片取自以下位置的示例：

我标记“pluot？”区域进行捕捉：

请参见虚线矩形

虚线矩形使用js绘制，给定两个事件中的鼠标坐标：

onmousedown

和

onmousedup

。因为矩形绘制正确，所以我假设我的坐标是正确的。但是当我将这些坐标传递给上面的函数

snapImage（）

时，我得到了以下捕获的图像：

看起来有一个偏移量。可能开始坐标

drawImage（）

的操作与我的画布开始坐标不同

---

编辑：

---

结果表明，当我使用100%缩放时，我的代码可以工作。但当我放大/缩小时，情况并不是这样。

我想这是因为你从clientX和clientY的事件中得到了x和y。改用pageX和pageY。看看这个

---

原来有一个内置的chrome功能，可以捕获活动选项卡的图像。所以我最终用它代替了html2canvas。我得到了警察的帮助。此处的Github代码：

这是我的密码：

听众：

//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

获取

---

这种方法是防缩放和分辨率的。

我在扩展模式下有两个不同大小的监视器，您的代码只在较小的监视器上工作。当我将浏览器窗口移到更大的屏幕时，我遇到了一个类似的问题，就像我在放大和缩小时遇到的问题一样，你的解决方案不太管用。。。事实上，我刚刚发现，没有zoom，我的解决方案也能工作……你是怎么做到的？如何调用此方法？

//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);
}