Захват изображения элемента в расширении Chrome (не с увеличением)

Я пытаюсь получить изображение / снимок экрана определенного элемента в расширении Chrome, проблема в том, что когда я обрезаю результат из chrome.tabs.captureVisibleTab результирующее изображение будет отключено, если страница увеличена или уменьшена (через View -> Zoom In).

В частности, проблема в том, что из-за увеличения страницы смещения / размеры, которые я получаю из скрипта контента, не увеличиваются / уменьшаются, поэтому я в итоге обрезаю неправильную область скриншота

Есть ли способ получить / установить вкладки текущего уровня масштабирования? Или определить правильный размер / положение элемента?

Все, что я нашел на Google указывает на нет, но удивительный скриншот заставляет эту работу как-то

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);
Источник

2 ответа

Я попробовал с примером расширения здесь, и он отлично работал с Zoom in и Zoom out. Это всегда 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();
Источник

Я считаю, что вы можете использовать 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 для настройки размеров.

Источник
Другие вопросы по тегам