如何使用electron实现一个截屏工具-创新互联
这篇文章将为大家详细讲解有关如何使用electron实现一个截屏工具,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站建设、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的子长网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!思路
electron 提供了截取屏幕的 API,可以轻松的获取每个屏幕(存在外接显示器的情况)和每个窗口的图像信息。
把图片截取出来,然后创建一个全屏的窗口盖住整个屏幕,将截取的图片绘制在窗口上,然后再覆盖一层黑色半透明的元素,看起来就像屏幕定住了一样;
在窗口上增加交互制作选区的效果;
点击确定,利用 canvas 对应选区的位置截取图片内容,写入剪贴板和保存图片。
搭建项目
首先创建 package.json
填写项目的必要信息, 注意 main 为入口文件。
{ "name": "electorn-capture-screen", "version": "1.0.0", "main": "main.js", "repository": "https://github.com/chrisbing/electorn-capture-screen.git", "author": "Chris", "license": "MIT", "scripts": { "start": "electron ." }, "dependencies": { "electron": "^3.0.2" } }
创建 main.js
, 代码来自 electron 官方文档
const { app, BrowserWindow, ipcMain, globalShortcut } = require('electron') const os = require('os') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win function createWindow() { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600 }) // 然后加载应用的 index.html。 win.loadFile('index.html') // 打开开发者工具 win.webContents.openDevTools() // 当 window 被关闭,这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象,如果你的应用支持多窗口的话, // 通常会把多个 window 对象存放在一个数组里面, // 与此同时,你应该删除相应的元素。 win = null }) } // Electron 会在初始化后并准备 // 创建浏览器窗口时,调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow) // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上,除非用户用 Cmd + Q 确定地退出, // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { // 在macOS上,当单击dock图标并且没有其他窗口打开时, // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow() } })
创建 index.html
, html 中放了一个按钮, 用来触发截屏操作
Hello World!
这样一个简单的 electron 项目就完成了, 执行 yarn start
或者 npm start
即可看到一个窗口, 窗口中有一个按钮
触发截屏
截屏是一个相对独立的功能, 并且有可能会有全局快捷键以及菜单触发等脱离窗口的情况, 所以截屏的触发应该放在 main 进程中来实现
在 renderer 进程中可以通过 ipc 通讯来完成, 在页面的代码中使用 ipcRenderer 发送事件, 而在 main 中使用 ipcMain 接收事件
// index.html const { ipcRenderer } = require('electron') document.getElementById('js-capture').addEventListener('click', ()=>{ ipcRenderer.send('capture-screen') })
在 main 进程中接收 capture-screen
事件
// main.js // 接收事件 ipcMain.on('capture-screen', captureScreen)
同时加入全局快捷键触发和取消截屏
// main.js // 注册全局快捷键 // globalShortcut 需要在 app ready 之后 globalShortcut.register('CmdOrCtrl+Shift+A', captureScreen) globalShortcut.register('Esc', () => { if (captureWin) { captureWin.close() captureWin = null } })
通过快捷键和事件来触发截屏方法 captureScreen
, 接下来实现这个方法来创建一个截屏窗口
创建截屏窗口
截屏窗口是要创建一个全屏的窗口, 并且把屏幕图片绘制在窗口上, 再通过鼠标拖拽等交互操作选出特定区域的图像.
第一步是要创建窗口
// main.js let captureWin = null const captureScreen = (e, args) => { if (captureWin) { return } const { screen } = require('electron') let { width, height } = screen.getPrimaryDisplay().bounds captureWin = new BrowserWindow({ // window 使用 fullscreen, mac 设置为 undefined, 不可为 false fullscreen: os.platform() === 'win32' || undefined, // win width, height, x: 0, y: 0, transparent: true, frame: false, skipTaskbar: true, autoHideMenuBar: true, movable: false, resizable: false, enableLargerThanScreen: true, // mac hasShadow: false, }) captureWin.setAlwaysOnTop(true, 'screen-saver') // mac captureWin.setVisibleOnAllWorkspaces(true) // mac captureWin.setFullScreenable(false) // mac captureWin.loadFile(path.join(__dirname, 'capture.html')) // 调试用 // captureWin.openDevTools() captureWin.on('closed', () => { captureWin = null }) }
窗口需要覆盖全屏, 并且完全置顶, 在 windows 下可以使用 fullscreen
来保证全屏, Mac 下 fullscreen 会把窗口移到单独桌面, 所以采用了另外的办法, 代码注释上标注了不同系统的相关选项, 具体内容可以查看文档
注意这里窗口加载了另外一个 html 文件, 这个文件用来负责截屏和裁剪的一些交互工作
capture.html
首先 html 结构
// capture.html
Bg : 截屏图片 Mask : 一层灰色遮罩 Canvas : 绘制选中的图片区域和边框 Size info : 标识截取范围的尺寸 Toolbar : 操作按钮, 用来取消和保存等 capture-renderer.js : js 代码
@import "./assets/iconfont/iconfont.css"; html, body, div { margin: 0; padding: 0; box-sizing: border-box; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-canvas { position: absolute; display: none; z-index: 1; } .size-info { position: absolute; color: #ffffff; font-size: 12px; background: rgba(40, 40, 40, 0.8); padding: 5px 10px; border-radius: 2px; font-family: Arial Consolas sans-serif; display: none; z-index: 2; } .toolbar { position: absolute; color: #343434; font-size: 12px; background: #f5f5f5; padding: 5px 10px; border-radius: 4px; font-family: Arial Consolas sans-serif; display: none; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); z-index: 2; align-items: center; } .toolbar .iconfont { font-size: 24px; padding: 2px 5px; }
各个元素基本为 absolute 定位, 由 js 控制位置 按钮使用了 iconfont , 所有涉及到的资源文件和完整项目可以到 GitHub - chrisbing/electorn-capture-screen: electron capture screen 中下载
截图交互
完成的功能有截取指定区域图片, 拖拽移动和改变选区尺寸, 实时尺寸显示和工具条
获取屏幕截图
// capture-renderer.js const { ipcRenderer, clipboard, nativeImage, remote, desktopCapturer, screen } = require('electron') const Event = require('events') const fs = require('fs') const { bounds: { width, height }, scaleFactor } = screen.getPrimaryDisplay() const $canvas = document.getElementById('js-canvas') const $bg = document.getElementById('js-bg') const $sizeInfo = document.getElementById('js-size-info') const $toolbar = document.getElementById('js-toolbar') const $btnClose = document.getElementById('js-tool-close') const $btnOk = document.getElementById('js-tool-ok') const $btnSave = document.getElementById('js-tool-save') const $btnReset = document.getElementById('js-tool-reset') console.time('capture') desktopCapturer.getSources({ types: ['screen'], thumbnailSize: { width: width * scaleFactor, height: height * scaleFactor, } }, (error, sources) => { console.timeEnd('capture') let imgSrc = sources[0].thumbnail.toDataURL() let capture = new CaptureRenderer($canvas, $bg, imgSrc, scaleFactor) })
screen.getPrimaryDisplay()
可以获取主屏幕的大小和缩放比例, 缩放比例在高分屏中适用, 在高分屏中屏幕的物理尺寸和窗口尺寸并不一致, 一般会有2倍3倍等缩放倍数, 所以为了获取到高清的屏幕截图, 需要在屏幕尺寸基础上乘以缩放倍数
desktopCapturer
获取屏幕截图的图片信息, 获取的是一个数组, 包含了每一个屏幕的信息, 这里呢暂时只处理了第一个屏幕的信息
获取了截图信息后创建 CaptureRenderer 进行交互处理
CaptureRenderer
// capture-renderer.js class CaptureRenderer extends Event { constructor($canvas, $bg, imageSrc, scaleFactor) { super() // ... this.init().then(() => { console.log('init') }) } async init() { this.$bg.style.backgroundImage = `url(${this.imageSrc})` this.$bg.style.backgroundSize = `${width}px ${height}px` let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') let img = await new Promise(resolve => { let img = new Image() img.src = this.imageSrc if (img.complete) { resolve(img) } else { img.onload = () => resolve(img) } }) canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0) this.bgCtx = ctx // ... } // ... onMouseDrag(e) { // ... this.selectRect = {x, y, w, h, r, b} this.drawRect() this.emit('dragging', this.selectRect) // ... } drawRect() { if (!this.selectRect) { this.$canvas.style.display = 'none' return } const { x, y, w, h } = this.selectRect const scaleFactor = this.scaleFactor let margin = 7 let radius = 5 this.$canvas.style.left = `${x - margin}px` this.$canvas.style.top = `${y - margin}px` this.$canvas.style.width = `${w + margin * 2}px` this.$canvas.style.height = `${h + margin * 2}px` this.$canvas.style.display = 'block' this.$canvas.width = (w + margin * 2) * scaleFactor this.$canvas.height = (h + margin * 2) * scaleFactor if (w && h) { let imageData = this.bgCtx.getImageData(x * scaleFactor, y * scaleFactor, w * scaleFactor, h * scaleFactor) this.ctx.putImageData(imageData, margin * scaleFactor, margin * scaleFactor) } this.ctx.fillStyle = '#ffffff' this.ctx.strokeStyle = '#67bade' this.ctx.lineWidth = 2 * this.scaleFactor this.ctx.strokeRect(margin * scaleFactor, margin * scaleFactor, w * scaleFactor, h * scaleFactor) this.drawAnchors(w, h, margin, scaleFactor, radius) } drawAnchors(w, h, margin, scaleFactor, radius) { // ... } onMouseMove(e) { // ... document.body.style.cursor = 'move' // ... } onMouseUp(e) { this.emit('end-dragging') this.drawRect() } getImageUrl() { const { x, y, w, h } = this.selectRect if (w && h) { let imageData = this.bgCtx.getImageData(x * scaleFactor, y * scaleFactor, w * scaleFactor, h * scaleFactor) let canvas = document.createElement('canvas') let ctx = canvas.getContext('2d') ctx.putImageData(imageData, 0, 0) return canvas.toDataURL() } return '' } reset() { // ... } }
代码有点长, 由于篇幅的原因, 这里只列出了关键部分, 完整代码请到 GitHub - chrisbing/electorn-capture-screen: electron capture screen 上查看
初始化时保存一份绘制了全部图片的 canvas , 用来后续取选区部分图片用
绘制过程中从 通过 canvas 中的 getImageData
获取图片内容 然后通过 putImageData
绘制到显示 canvas 中
附加内容
在 CaptureRenderer 类中处理了图片的选取. 还需要工具条和尺寸信息
这一部分代码和图片选取关系不是很大, 所以在外部单独处理, 通过 CaptureRenderer 传出的事件和一些属性即可完成交互
// capture-renderer.js let onDrag = (selectRect) => { $toolbar.style.display = 'none' $sizeInfo.style.display = 'block' $sizeInfo.innerText = `${selectRect.w} * ${selectRect.h}` if (selectRect.y > 35) { $sizeInfo.style.top = `${selectRect.y - 30}px` } else { $sizeInfo.style.top = `${selectRect.y + 10}px` } $sizeInfo.style.left = `${selectRect.x}px` } capture.on('start-dragging', onDrag) capture.on('dragging', onDrag) let onDragEnd = () => { if (capture.selectRect) { const { x, r, b, y } = capture.selectRect $toolbar.style.display = 'flex' $toolbar.style.top = `${b + 15}px` $toolbar.style.right = `${window.screen.width - r}px` } } capture.on('end-dragging', onDragEnd) capture.on('reset', () => { $toolbar.style.display = 'none' $sizeInfo.style.display = 'none' })
移动过程中计算尺寸, 并且实时计算位置, 移动过程中隐藏工具条
重置选区时隐藏工具条和尺寸标识
保存剪贴板
// capture-renderer.js const audio = new Audio() audio.src = './assets/audio/capture.mp3' let selectCapture = () => { if (!capture.selectRect) { return } let url = capture.getImageUrl() remote.getCurrentWindow().hide() audio.play() audio.onended = () => { window.close() } clipboard.writeImage(nativeImage.createFromDataURL(url)) ipcRenderer.send('capture-screen', { type: 'complete', url, }) } $btnOk.addEventListener('click', selectCapture)
通过 nativeImage.createFromDataURL
创建图片写入剪贴板, 通知 main 进程截图完毕, 并附带图片的 base64 url, 然后关闭窗口
保存到文件
// capture-renderer.js $btnSave.addEventListener(‘click', () => { let url = capture.getImageUrl() remote.getCurrentWindow().hide() remote.dialog.showSaveDialog({ filters: [{ name: ‘Images', extensions: [‘png', ‘jpg', ‘gif'] }] }, function (path) { if (path) { fs.writeFile(path, new Buffer(url.replace(‘data:image/png;base64,', ‘'), ‘base64'), function () { ipcRenderer.send(‘capture-screen', { type: ‘complete', url, path, }) window.close() }) } else { ipcRenderer.send(‘capture-screen', { type: ‘cancel', url, }) window.close() } }) })
利用 remote.dialog.showSaveDialog
选择保存文件名, 然后通过 fs 模块写入文件
最终整体目录结构
├── index.html ├── lib // 截图核心代码 │ ├── assets // font 和 声音资源 │ ├── capture-main.js // main 中截图部分代码 │ ├── capture-renderer.js // 截图交互代码 │ └── capture.html // 截图 html ├── main.js └── package.json
关于“如何使用electron实现一个截屏工具”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻标题:如何使用electron实现一个截屏工具-创新互联
网站URL:http://myzitong.com/article/csjddh.html