5

I made a chrome extension, which captures a single element (div) of a website.

I used chrome.tabs > captureVisibleTab to make a screenshot. Then, with the coordinates (x/y) and sizes (width/height) of the element (div) I crop the screenshot.

This works fine for me on non-retina displays. But not so on a Macbook with Retina display.

For example, on www.247activemedia.com, we want to capture the header div with the logo (id="header").

On non-retina result is:enter image description here

On a Macbook with Retina display:

enter image description here

Cropping failed there, and also the resultion is not correct.

Here is the code:

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;

        });

How can I fix this for Retina Displays?

Danzzz
  • 523
  • 8
  • 26
  • There's a fix here: http://outof.me/chrome-extension-retina-capturevisibletab-translate3d-2-x-res/ – Dayton Wang Aug 14 '15 at 16:29
  • I found this, but don't know how to implent this in detail. I don't use IFrames ... If I use the context.scale method everything get's to small then. – Danzzz Aug 14 '15 at 19:46

2 Answers2

1

Ok, thanks to @gui47 -- the answer is to detect scale with window.devicePixelRatio which is returning 2 on my MBP

neaumusic
  • 10,027
  • 9
  • 55
  • 83
0

How about this, it works for me.

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

Alan Dong
  • 3,981
  • 38
  • 35