electron: scale factor error in webview/webcontents.capturePage

Hey guys, I apologize for the delayed response. So here is some code from our application that we are using to capture the page. This code is running on Windows 10, Linux Mint Debian Edition, non-retina Macs, and retina MacBooks. This is essentially the 3rd scenario from my original post on this issue - the root issue is still present, but can be managed. We have just accepted that the captured jpeg on retina displays will have a higher image resolution than expected but we have found that the quality of the image is acceptable. In our case, the application is being used for digital evidence preservation so we opted to keep the raw captured image. However, if you want the resulting image to be the expected dimensions you would resize it down by scaleFactor.

Please note that I ripped out the pertinent code from our application and had to sanitize it quite a bit as it is a closed source application. As such, this code as it’s copied here is not running exactly as is - it’s meant to just show what we’re doing.

The code is currently running against Electron v1.4.15 in production and v1.6.5 in dev.

// webview is the WebView element in my html page

// Injects javascript into the webview page in order to determine the viewable window height
function getWebviewMeta(cb) {
    var code = "var r = {}; \
        r.pageHeight = window.innerHeight; \
        r.pageWidth = window.innerWidth; \
        r;";
    webview.executeJavaScript(code, false, function (r) {
        let webviewMeta = {};
        webviewMeta.captureHeight = r.pageHeight;
        webviewMeta.captureWidth = r.pageWidth;
        cb(webviewMeta);
    });
}

// Creates an image of the visible area of the WebView
function captureWeb() {
    getWebviewMeta(function (webviewMeta) {

        // builds a rectangle whose dimensions are scaled based on the display scale factor
        // this rectangle represents the scaled viewable window in the Electron application for the WebView
        let captureRect = {
            x: 0,
            y: 0,
            width: +webviewMeta.captureWidth * electron.screen.getPrimaryDisplay().scaleFactor,
            height: +webviewMeta.captureHeight * electron.screen.getPrimaryDisplay().scaleFactor
        };

        webview.capturePage(captureRect, (img) => {
            if (img.isEmpty()) {
                // DIDN’T CAPTURE
                // NOTE - in my application we are manually scrolling the view and timing of the record
                // is an issue - sometimes the captured image is empty, we delay a few hundred ms
                // and capture again
            } else {
                // SAVE YOUR JPEG FILE
                let jpgFile = img.toJPEG(90);

                // If you want the image size to be the expected pixel resolution, resize it by scaleFactor:
                let resizedImg = img.resize({width : img.getSize().width / electron.screen.getPrimaryDisplay().scaleFactor});
                let resizedJpgFile = resizedImg.toJPEG(90);
            }
        });
    });
}

I should have added that my method is a workaround - it’s not something that I think should be merged.

It seems the method webContents.capturePage should have some clarification since it seems most developers expect it to capture the full page length instead of what’s visible in the viewport.

I have yet to try Puppeteer’s full-page screenshot method but this sounds like what developers are looking for in Electron: page.screenshot([fullPage: true])

I followed a couple of issues to this thread and the above, while helpful, didn’t necessarily solve the original issue that got me here:

webContents.capturePage take a screenshot of the complete webpage

I found a fix by opening an offscreen BrowserWindow and enabling the window to be larger than the screen through the following BrowserWindow([options]): enableLargerThanScreen: true

Execute Javascript on the webContents to return the document.body.offsetHeight

Before executing the capturePage method, resize the BrowserWindow with win.setContentSize() using the page’s offsetHeight result.

I haven’t used this in production but this is returning a complete webpage.

The issue still happens for me, but I have code implemented that works around the issue in a reliable manner - our application has been in production for a couple of months. I am tied up for most of the day but I will try and get sample working code posted for you guys this afternoon.

Note that in the code snippet that @mattgalvin provided there’s a chance that captureRect.width and captureRect.height become “non-integer” floats. If f.ex. captureRect.width is 3120.5, then an exception may be raised because integers are expected.

To fix this, I replaced

      let captureRect = {
        x: 0,
        y: 0,
        width: +webviewMeta.captureWidth * electron.screen.getPrimaryDisplay().scaleFactor,
        height: +webviewMeta.captureHeight * electron.screen.getPrimaryDisplay().scaleFactor
      };

with

      let captureRect = {
        x: 0,
        y: 0,
        width: parseInt(webviewMeta.captureWidth * electron.screen.getPrimaryDisplay().scaleFactor),
        height: parseInt(webviewMeta.captureHeight * electron.screen.getPrimaryDisplay().scaleFactor)
      };

If someone would be interested in code of the workaround:

let offscreenRenderer;

const exportToPNG = async () => {
    try {
        const pageRect = await BrowserView.fromId(2).webContents.executeJavaScript(
            `(() => { return {x: 0, y: 0, width: document.body.offsetWidth, height: document.body.offsetHeight}})()`);

        offscreenRenderer = new BrowserWindow({
            enableLargerThanScreen: true,
            show: false,
            webPreferences: {
                offscreen: true,
                nodeIntegration: false, // is default value after Electron v5
                contextIsolation: true, // protect against prototype pollution
                enableRemoteModule: false, // turn off remote
            }
        });
        
        offscreenRenderer.setContentSize(pageRect.width, pageRect.height);
        await offscreenRenderer.loadURL('http://foo/bar/baz');
        const screenshot = await offscreenRenderer.webContents.capturePage(pageRect);
        await fs.promises.writeFile('some/path/filename.png', screenshot.toPNG());
    } catch (err) { 
        console.error(err)
    } finally {
        if (offscreenRenderer && !offscreenRenderer.isDestroyed()) {
            offscreenRenderer.destroy();
        }
}

You can use a callback for the paint event:

    offscreenRenderer.webContents.on('paint', (evt, dirtyRect, image) => {
        fs.writeFile('some/path/filename.png', image.toPNG(), (err) => {
            if (err) throw err;
        });
    });

but I also do export to PDF and other formats and found it difficult to convert the callback to Promise-resolving (using Deferred maybe ?)

And no guarantee, that the offscreenRenderer will be properly destroyed and the code does not cause any memory leaks. Correct me please if I am wrong.

Our code also affected by this issue. Is someone currently working on this? any known solution? Thx