javascript - 如何在 Chrome 扩展中使用 javascript 截取某些特定区域的屏幕截图？

Question

我正在开发一个 Chrome 扩展程序，我想在其中仅截取当前窗口的特定部分的屏幕截图，而不是整个窗口本身。
目前我一直在使用chrome的这个API

chrome.tabs.captureVisibleTab(null,{},function(dataUri){
            // datauri is the screenshot
        });

它会截取整个页面的屏幕截图，但我想要给定的 x,y 坐标的屏幕截图。
我怎样才能达到同样的效果？
非常感谢!

Answer 1

一种可能的方法是:

1. 使用CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)将屏幕截图绘制到 Canvas 上，同时使用相应的参数对图像进行裁剪
2. 使用HTMLCanvasElement.toDataURL将 Canvas 转换为 data URI包含图像的表示，或 CanvasRenderingContext2D.getImageData()返回 ImageData对象，这取决于您的需求。

示例代码(请注意，根据您的需求，您可能希望将内部逻辑移动到内容脚本):

chrome.tabs.captureVisibleTab(null, {}, function(dataUri) {
    var img = new Image();
    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        var context = canvas.getContext('2d');
        // Assuming px,py as starting coordinates and hx,hy be the width and the height of the image to be extracted
        context.drawImage(img, px, py, hx, hy, 0, 0, WIDTH, HEIGHT);
        var croppedUri = canvas.toDataURL('image/png');
        // You could deal with croppedUri as cropped image src.
    };
    img.src = dataUri;
});