Chrome扩展程序屏幕截图用于Retina显示屏的部分图像裁剪 [英] Chrome extension screenshot partial image cropping for Retina Display
问题描述
我做了一个chrome扩展程序,它捕获了网站的单个元素(div).
I made a chrome extension, which captures a single element (div) of a website.
我使用chrome.tabs> captureVisibleTab制作了屏幕截图.然后,使用元素(div)的坐标(x/y)和大小(width/height)裁剪屏幕截图.
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.
在非视网膜显示器上,这对我来说效果很好.但是在配备Retina显示屏的Macbook上却不是.
This works fine for me on non-retina displays. But not so on a Macbook with Retina display.
例如,在www.247activemedia.com上,我们希望捕获带有徽标(id ="header")的标头div.
For example, on www.247activemedia.com, we want to capture the header div with the logo (id="header").
在非视网膜上的结果是:
On non-retina result is:
在具有Retina显示屏的Macbook上:
On a Macbook with Retina display:
那里的裁剪失败,并且结果也不正确.
Cropping failed there, and also the resultion is not correct.
这是代码:
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显示器解决此问题?
How can I fix this for Retina Displays?
推荐答案
好吧,感谢@ gui47-答案是使用 window.devicePixelRatio
检测缩放,该缩放在我的MBP上返回2
Ok, thanks to @gui47 -- the answer is to detect scale with window.devicePixelRatio
which is returning 2 on my MBP
这篇关于Chrome扩展程序屏幕截图用于Retina显示屏的部分图像裁剪的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!