CODEWITHSUNDEEP
javascriptnode.jselectron
Surendar
Surendar

Reputation: 153

capturePage in electron JS

This is my Code. I want to take a screenshot of the browserwindow. But its not taking the screenshot as epected. The window is offscreen. I want to take the screenshot asap the page loads and convert it to PNG. Can someone please help

const {BrowserWindow} = require('electron')

// Offscreen BrowserWindow
let offscreenWindow

// Exported readItem function
module.exports = (url, callback) => {

  // Create offscreen window
  offscreenWindow = new BrowserWindow({
    width: 500,
    height: 500,
    show: false,
    webPreferences: {
      offscreen: true
    }
  })

  // Load item url
  offscreenWindow.loadURL(url)
  console.log("readitem")

  // Wait for content to finish loading
  offscreenWindow.webContents.on('did-stop-loading', () => {

    // Get page title
    let title = offscreenWindow.getTitle()
    console.log(title)

    // Get screenshot (thumbnail)
    offscreenWindow.capturePage( image => {

        fs.writeFile('test.png', image.toPNG(), (err) => {
            if (err) throw err
            console.log('It\'s saved!')})})


      // Get image as dataURL
      //let screenshot = image.toDataURL()


      // Execute callback with new item object
      callback({ title, url })

      // Clean up
      offscreenWindow.close()
      offscreenWindow = null

  })}

Upvotes: 1

Views: 3237

Answers (1)

namila007
namila007

Reputation: 1134

I created this file using your. Its working and tested. You need to use contents.capturePage([rect])

offscreenWindow.webContents.capturePage().then(image=>{ //something done}) then write the image to the dis synchronously by using fs.writeSync()

screenshot.js

const { BrowserWindow } = require('electron')
const fs = require('fs')
const path = require('path')
// Offscreen BrowserWindow
let offscreenWindow
let nativeImage
// Exported readItem function
module.exports = (url, callback) => {

    // Create offscreen window
    offscreenWindow = new BrowserWindow({
        width: 500,
        height: 500,
        show: false,
        webPreferences: {
            offscreen: true
        }
    })

    // Load item url
    offscreenWindow.loadURL(url)
    console.log("readitem")

    // Wait for content to finish loading
    offscreenWindow.webContents.on('did-stop-loading', async() => {

        // Get page title
        let title = offscreenWindow.getTitle()
        console.log(title)

        // Get screenshot (thumbnail)
        nativeImage = await offscreenWindow.webContents.capturePage().then(image => {
            fs.writeFileSync('test.png', image.toPNG(), (err) => {
                if (err) throw err
            })
            console.log('It\'s saved!')
            return image.toDataURL()

        })
        let obj = { title:title, 
            url: url,
            image: nativeImage }
        callback(obj) 
        // Clean up
        offscreenWindow.close()
        offscreenWindow = null

    })
}

main.js

const {app, BrowserWindow, ipcMain } = require('electron')
const path = require("path")
const fs = require("fs")
const screenshot = require("./screen")
let  window 

function createWindow () {
    window = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  window.loadFile("./index.html")
  window.webContents.openDevTools()
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

ipcMain.on("start::screenshot", (event,arg) => {
  console.log("Starting")
  screenshot(arg, (reply) => {console.log("It's completed", reply)})
})

renderer.js

const { ipcRenderer } = require('electron')

function start() {
    console.log("start")
    let args = "https://google.com"
    ipcRenderer.send('start::screenshot',args)
}

Upvotes: 3

Related Questions