Скриншот скриншота Chrome для частичного обрезания изображений для Retina Display

Question

Я сделал расширение хром, которое захватывает один элемент (div) веб-сайта.

Я использовал chrome.tabs> captureVisibleTab, чтобы сделать снимок экрана. Затем, с координатами (x/y) и размерами (шириной/высотой) элемента (div), я обрезаю снимок экрана.

Это отлично работает для меня на дисплеях, не содержащих сетчатки. Но не так на Macbook с дисплеем Retina.

Например, на www.247activemedia.com мы хотим захватить заголовок div логотипом (id = "header").

В не-сетчатка результата:

На Macbook с дисплеем Retina:

Обрезка не удалось там, а также resultion не является правильным.

Вот код:

chrome.tabs.captureVisibleTab(tab.windowId, { format: "png" }, function(screenshot) { 
 
      if (!canvas) { 
 
       canvas = document.createElement("canvas"); 
 
       document.body.appendChild(canvas); 
 
      } 
 
      var partialImage = new Image(); 
 
      partialImage.onload = function() { 
 
       canvas.width = dimensions.width; 
 
       canvas.height = dimensions.height; 
 
       var context = canvas.getContext("2d"); 
 
       context.drawImage(
 
        partialImage, 
 
        dimensions.left, 
 
        dimensions.top, 
 
        dimensions.width, 
 
        dimensions.height, 
 
        0, 
 
        0, 
 
        dimensions.width, 
 
        dimensions.height 
 
       ); 
 
       var croppedDataUrl = canvas.toDataURL("image/png"); 
 
       chrome.tabs.create({ 
 
        url: croppedDataUrl, 
 
        windowId: tab.windowId 
 
       }); 
 
      } 
 
      partialImage.src = screenshot; 
 

 
     });

Как я могу это исправить для Retina дисплеев?

Answer 1

Хорошо, спасибо @ gui47 - ответ обнаружить шкалу с window.devicePixelRatio которая возвращается 2 на мой MBP

Answer 2

Как об этом, это работает для меня.

let ratio = window.devicePixelRatio; 
context.drawImage(image, 
    dimensions.left*ratio, dimensions.top*ratio, 
    dimensions.width*ratio, dimensions.height*ratio, 
    0, 0, 
    dimensions.width, dimensions.height 
); 

CanvasAPI: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage