4

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

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

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

我在谷歌上找到的所有东西都指向不，但是很棒的截图让这项工作以某种方式起作用

背景.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);
4

2 回答 2

0

我在这里尝试了一个示例扩展，它也与放大和缩小完美配合。它总是 captured visible Tab完美的。如果您正在考虑调整缩放级别，您可以尝试document.body.style.zoom = "Your_value%";但是您需要将此代码通过content script以使其运行chrome extensions

有效的示例代码

清单.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"}
}

脚本.html

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

按钮.js

function screenshot() {
chrome.tabs.captureVisibleTab(null,{format:"jpeg",quality:100},function(dataUrl){
    window.open(dataUrl);
});
}
screenshot();
于 2012-11-25T17:04:59.297 回答
0

我相信您可以使用 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 来调整尺寸。

于 2015-06-08T18:43:30.850 回答