在Chrome扩展程序中捕获元素图像（缩放失败）

Question

在Chrome扩展程序中捕获元素图像（缩放失败）

google-chromegoogle-chrome-extensionscreenshotzooming

5

我正在尝试在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);

- Christopher Tarquini

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rick · Answer 1

我相信你可以使用 Range 对象和 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来调整尺寸。

- Sudarshan · Answer 2

我在这里尝试了一个示例扩展程序，它可以完美地使用缩放功能。它总是完美地捕获可见选项卡。如果您想要调整缩放级别，可以尝试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();