Question

我正在制作镀铬扩展程序，我想在其中截取当前窗口的特定部分，而不是整个窗口本身。目前，我一直在使用这个chrome的API

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

它需要整个页面的屏幕截图，但我想要我给定的x，y坐标的截图我怎样才能达到同样的目的？
非常感谢！

Answer 1

一种可能的方法是：

使用CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)将截图绘制到画布上，同时利用相应的参数裁剪图像
使用HTMLCanvasElement.toDataURL将画布转换为包含图片表示的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;
});

如何使用chrome扩展程序中的javascript截取某些特定区域的屏幕截图？

1 个答案: