CODEWITHSUNDEEP
google-chrome-extensionscreen-capturechromebook
rok
rok

Reputation: 597

Chrome capture visible tab gives messy result

I have a Chrome extension, where I'm using the captureVisibleTab method of the chrome.tabs API to capture screenshots. I have tested the extension on 3 devices (Chromebooks) and I'm getting mixed results. Two of them work perfectly, but one always returns a completely malformed screenshot.

My code:

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){

            });
        }
    });
});

Any ideas what could be the issue on that one device?

EDIT

Example of a bad screenshot:

malformed screenshot taken by a Chrome extension

Upvotes: 1

Views: 1418

Answers (1)

Jay
Jay

Reputation: 307

I suspect that the device pixel ratio is higher on your 3rd device. This was an issue I was having with Retina displays when building a screenshot app. Basically, certain high-resolution displays have a higher ratio pixels per square inch. You're going to want to find window.devicePixelRatio and divide the context scale by that amount.

Assuming that you are using Canvas to draw the screenshot and capture it into an image, this little snippet should help show what you're going to want to do:

            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);

Let me know if that works for you.

Upvotes: 5

Related Questions