我正在开发一个 Chrome 扩展程序,我想在其中仅截取当前窗口的特定部分的屏幕截图,而不是整个窗口本身。
目前我一直在使用chrome的这个API
chrome.tabs.captureVisibleTab(null,{},function(dataUri){
// datauri is the screenshot
});
它会截取整个页面的屏幕截图,但我想要给定的 x,y 坐标的屏幕截图。
我怎样才能达到同样的效果?
非常感谢!
最佳答案
一种可能的方法是:
- 使用
CanvasRenderingContext2D.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
将屏幕截图绘制到 Canvas 上,同时使用相应的参数对图像进行裁剪 - 使用
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;
});
关于javascript - 如何在 Chrome 扩展中使用 javascript 截取某些特定区域的屏幕截图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38181137/