用于 Retina 显示的 Chrome 扩展截图部分图像裁剪

Question

我制作了一个 chrome 扩展，它捕获网站的单个元素 (div)。

我使用 chrome.tabs > captureVisibleTab 来制作屏幕截图。然后，使用元素 (div) 的坐标 (x/y) 和大小（宽度/高度）裁剪屏幕截图。

这在非视网膜显示器上对我来说很好用。但在配备 Retina 显示屏的 Macbook 上并非如此。

例如，在 www.247activemedia.com 上，我们要捕获带有徽标 (id="header") 的标题 div。

在非视网膜上的结果是：

在配备 Retina 显示屏的 Macbook 上：

在那里裁剪失败，结果也不正确。

这是代码：

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在我的 MBP 上返回 2 的比例