Chrome捕获可见标签会产生混乱的结果

Question

我有Chrome扩展程序，我正在使用captureVisibleTab API的chrome.tabs方法来捕获屏幕截图。我已经测试了3台设备（Chromebook）上的扩展程序，我得到的结果好坏参半。其中两个工作完美，但总会返回一个完全错误的截图。

我的代码：

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
    chrome.tabs.get(tabId, function (_tab) {
        if (_tab.status == "complete" && _tab.active ) {
            chrome.tabs.captureVisibleTab( function(dataUrl){

            });
        }
    });
});

任何想法可能是那台设备上的问题？

修改

错误屏幕截图的示例：

Answer 1

我怀疑第3台设备上的设备像素比率较高。这是我在制作截图应用程序时使用Retina显示的问题。基本上，某些高分辨率显示器具有更高的每平方英寸像素比率。您将要查找window.devicePixelRatio并将上下文比例除以该数量。

假设您使用Canvas绘制屏幕截图并将其捕获到图像中，这个小片段应该有助于显示您想要做的事情：

            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            if(window.devicePixelRatio > 1){
                context.scale(1/window.devicePixelRatio, 1/window.devicePixelRatio);
            }
            context.drawImage(image, 0, 0);

请告诉我这是否适合您。