4

Chrome拡張機能の特定の要素の画像/スクリーンショットを取得しようとしていますが、問題はchrome.tabs.captureVisibleTab、ページをズームイン/ズームアウトすると、結果の画像の結果がオフになることです（Via 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);
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"}
}

script.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 に答える