Electron使用指南—获得屏幕快照的方法

浅浅的花香味﹌ 2023-10-06 14:39 9阅读 0赞

### 1、完善主进程处理 ###

从渲染进程中拿到 `url` 后，通过 `offscreen` 获取屏幕快照。 在项目根目录下，创建 `readItem.js`：

// /readItems
    
    // Modules
    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)
    
      // Wait for content to finish loading
      offscreenWindow.webContents.on('did-finish-load', e => {
    
        // Get page title
        let title = offscreenWindow.getTitle()
    
        // Get screenshot (thumbnail)
        offscreenWindow.webContents.capturePage( image => {
    
          // Get image as dataURL
          let screenshot = image.toDataURL()
    
          // Execute callback with new item object
          callback({ title, screenshot, url })
    
          // Clean up
          offscreenWindow.close()
          offscreenWindow = null
        })
      })
    }

#### 2、更新 main.js ####

在 `/main.js` 文件里添加对 `readItem.js` 的引用：

// Modules
    // ...
    const readItem = require('./readItem')
    
    // ...
    
    // Listen for new item request
    ipcMain.on('new-item', (e, itemUrl) => {
    
      // remove all codes here.
    
      // Get new item and send back to renderer
      readItem( itemUrl, item => {
        e.sender.send('new-item-success', item)
      })
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

柔光的暖阳◎/ 2023年10月06日 14:42/ 0 赞/ 65 阅读

相关 Electron使用指南—获得屏幕快照的方法

1、完善主进程处理从渲染进程中拿到 `url` 后，通过 `offscreen` 获取屏幕快照。在项目根目录下，创建 `readItem.js`： // /

浅浅的花香味﹌/ 2023年10月06日 14:39/ 0 赞/ 10 阅读

相关 Electron使用指南—IPC 通信

IPC 通信 1、index.html <!DOCTYPE html> <html> <head> <meta char

以你之姓@/ 2023年10月06日 14:37/ 0 赞/ 71 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![9b265ee857754954a135efb2ff

拼搏现实的明天。/ 2023年10月06日 14:35/ 0 赞/ 71 阅读

相关 Electron使用指南——搜索信息

搜索信息的思路：在 `/src/components/Header.vue` 组件里获取到用户从搜索框里的关键字(keyword)，保存在 `Store` 里，再做个 `get

小灰灰/ 2022年12月03日 15:58/ 0 赞/ 221 阅读

相关 Electron使用指南——删除信息

在打开的窗口里注入按钮，点击按钮关闭窗口，同时删除相应的条目。 1、在打开的窗口中注入按钮修改 `/src/components/button.js`，编写创建的按钮

àì夳堔傛蜴生んèń/ 2022年12月03日 08:45/ 0 赞/ 283 阅读

相关 Electron使用指南——获得屏幕快照

1、完善主进程处理从渲染进程中拿到 `url` 后，通过 `offscreen` 获取屏幕快照。在项目根目录下，创建 `readItem.js`： // /

àì夳堔傛蜴生んèń/ 2022年12月03日 01:57/ 0 赞/ 71 阅读

相关 Electron使用指南——IPC 通信

IPC 通信 1、index.html <!DOCTYPE html> <html> <head> <meta char

今天药忘吃喽~/ 2022年12月02日 00:43/ 0 赞/ 193 阅读

相关 Electron使用指南 - [01] 介绍

Electron 介绍 1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序！ ![format_png][] 单纯使用JavaScr

素颜马尾好姑娘i/ 2022年12月01日 14:08/ 0 赞/ 262 阅读

相关 Android获得屏幕宽高的方法

Android开发中获得屏幕的宽度和高度还是比较常用的，在网上找到了很多，在这算是一个总结，以便以后使用。 1.看到的最常见的一种就是一下的这种了 windowM

╰半夏微凉°/ 2022年08月18日 13:25/ 0 赞/ 252 阅读