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:
On a Macbook with Retina display:
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?
Ok, thanks to @gui47 -- the answer is to detect scale with window.devicePixelRatio
which is returning 2 on my MBP
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With