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

Я пытаюсь получить изображение/снимок экрана определенного элемента в расширении chrome, проблема, с которой я сталкиваюсь, заключается в том, что когда я обрезаю результат от результирующее изображение выключено, если страница увеличена/выведена (с помощью 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);

источник

2012-11-25 Christopher Tarquini

я попытался с образец расширения здесь, и он отлично работал с 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();

источник

2012-11-25 17:04:59 Sudarshan

Проблема в том, что смещения/размеры ошибочны, когда страница увеличена, и она отображает неправильную часть страницы. –

И установка масштабирования% через CSS, похоже, не устраняет масштабирование, вызванное Chrome –

@ ChrisT: Пробовали ли вы настройки стилей смещения масштабирования и т. Д. Через скрипты контента, когда я настраивал значения, которые он здесь работал. – Sudarshan

Я считаю, что вы можете использовать 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-08 18:43:30 Rick

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

ответ

Смежные вопросы