用于 Retina Display 的 Chrome 扩展屏幕截图部分图像裁剪答案

【问题标题】：Chrome extension screenshot partial image cropping for Retina Display用于 Retina Display 的 Chrome 扩展屏幕截图部分图像裁剪
【发布时间】：2015-11-07 22:26:56
【问题描述】：

我制作了一个 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 显示器解决此问题？

【问题讨论】：

这里有一个修复：outof.me/…
我找到了这个，但不知道如何详细实现它。我不使用 IFrames ...如果我使用 context.scale 方法，那么一切都会变得很小。

标签： javascript canvas google-chrome-extension crop retina

【解决方案1】：

好的，感谢@gui47 -- 答案是使用window.devicePixelRatio 检测比例，它在我的 MBP 上返回 2

【讨论】：

【解决方案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

【讨论】：