小编Dan*_*zzz的帖子

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

我制作了一个 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 = …

Run Code Online (Sandbox Code Playgroud)

javascript canvas crop google-chrome-extension retina

Dan*_*zzz

lucky-day

5
推荐指数

1
解决办法

1315
查看次数