Question

我正在尝试获取chrome扩展中特定元素的图像/屏幕截图，我遇到的问题是，当我从chrome.tabs.captureVisibleTab裁剪结果时，如果页面放大/缩小（通过View -> Zoom In）。

特别问题是，由于页面被缩放，我从内容脚本获得的偏移/大小不会按比例放大/缩小，所以我最终会裁剪屏幕截图的错误区域

有没有办法获取/设置标签当前缩放级别？或者检测正确的元件尺寸/位置？

我在谷歌上找到的所有东西都指向不，但是精彩的截图让这项工作不知何故

background.js：

chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" }, function(dataUrl) {
            console.log('got capture');
            if (!canvas) {
                canvas = document.createElement("canvas");
                document.body.appendChild(canvas);
                console.log('created canvas');
            }
            var image = new Image();
            image.onload = function() {
                console.log('image loaded, cropping');
                canvas.width = dimensions.width;
                canvas.height = dimensions.height;
                var context = canvas.getContext("2d");
                context.drawImage(image,
                    dimensions.left, dimensions.top,
                    dimensions.width, dimensions.height,
                    0, 0,
                    dimensions.width, dimensions.height
                );
                console.log('image created');
                var croppedDataUrl = canvas.toDataURL("image/png");
                chrome.tabs.create({
                    url: croppedDataUrl,
                    windowId: tab.windowId
                });
            }
            image.src = dataUrl;
        });

内容的脚本：

console.log('getting dimensions')
                var dimensions = {
                    top: -window.scrollY + $(element).offset().top,
                    left: -window.scrollX + $(element).offset().left,
                    width: $(element).width(),
                    height: $(element).height()
                };
                console.log('sending dimensions', dimensions);
                sendResponse(dimensions);

Answer 1

我在这里尝试了一个示例扩展，它也完美地适用于放大和缩小。完全总是 captured visible Tab。如果您正在考虑调整缩放级别，可以尝试document.body.style.zoom = "Your_value%";但是，您需要将此代码放在content script之内，以使chrome extensions

运行

有效的示例代码

的的manifest.json 的

{ "name": "Screen Shot", "version": "1.0", "manifest_version": 2, "description": "This will generate Screen Shot of current Chrome Page", "browser_action": { "default_icon": "screen.png", "default_popup": "script.html" }, "permissions": [ "tabs","<all_urls>" ], "icons":{"16":"screen.png","48":"screen.png","128":"screen.png"} }

的 script.html 的

<html> <head> <script src="button.js"></script> </head> <style> body{ margin:0px; width:0px; height:0px; border:0px; } </style> <body> </body> </html>

的 button.js 的

function screenshot() { chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(dataUrl){ window.open(dataUrl); }); } screenshot();

Answer 2

我相信你可以使用Range Object和Range.getBoundingClientRect（）来适当地考虑缩放。

console.log('getting dimensions')
var r=new Range();//could be done elsewhere reuse
r.selectNode(element);
var dimensions = r.getBoundingClientRect();
console.log('sending dimensions', dimensions);
sendResponse(dimensions);

您可能需要将尺寸复制到基础js对象以使其正确发送。

另一种选择是使用chrome.tabs.getZoom来调整尺寸。

在chrome扩展中捕获元素图像（使用缩放失败）

2 个答案: