Bg : 截屏圖片 Mask : 一層灰色遮罩 Canvas : 繪制選中的圖片區(qū)域和邊框 Size info : 標(biāo)識(shí)截取范圍的尺寸 Toolbar : 操作按鈕, 用來(lái)取消和保存等 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;
}各個(gè)元素基本為 absolute 定位, 由 js 控制位置 按鈕使用了 iconfont , 所有涉及到的資源文件和完整項(xiàng)目可以到 GitHub - chrisbing/electorn-capture-screen: electron capture screen 中下載
截圖交互
完成的功能有截取指定區(qū)域圖片, 拖拽移動(dòng)和改變選區(qū)尺寸, 實(shí)時(shí)尺寸顯示和工具條
獲取屏幕截圖
// 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() 可以獲取主屏幕的大小和縮放比例, 縮放比例在高分屏中適用, 在高分屏中屏幕的物理尺寸和窗口尺寸并不一致, 一般會(huì)有2倍3倍等縮放倍數(shù), 所以為了獲取到高清的屏幕截圖, 需要在屏幕尺寸基礎(chǔ)上乘以縮放倍數(shù)
desktopCapturer 獲取屏幕截圖的圖片信息, 獲取的是一個(gè)數(shù)組, 包含了每一個(gè)屏幕的信息, 這里呢暫時(shí)只處理了第一個(gè)屏幕的信息
獲取了截圖信息后創(chuàng)建 CaptureRenderer 進(jìn)行交互處理
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() {
// ...
}
}代碼有點(diǎn)長(zhǎng), 由于篇幅的原因, 這里只列出了關(guān)鍵部分, 完整代碼請(qǐng)到 GitHub - chrisbing/electorn-capture-screen: electron capture screen 上查看
初始化時(shí)保存一份繪制了全部圖片的 canvas , 用來(lái)后續(xù)取選區(qū)部分圖片用
繪制過(guò)程中從 通過(guò) canvas 中的 getImageData 獲取圖片內(nèi)容 然后通過(guò) putImageData 繪制到顯示 canvas 中
附加內(nèi)容
在 CaptureRenderer 類(lèi)中處理了圖片的選取. 還需要工具條和尺寸信息
這一部分代碼和圖片選取關(guān)系不是很大, 所以在外部單獨(dú)處理, 通過(guò) 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'
})移動(dòng)過(guò)程中計(jì)算尺寸, 并且實(shí)時(shí)計(jì)算位置, 移動(dòng)過(guò)程中隱藏工具條
重置選區(qū)時(shí)隱藏工具條和尺寸標(biāo)識(shí)
保存剪貼板
// 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)通過(guò) nativeImage.createFromDataURL 創(chuàng)建圖片寫(xiě)入剪貼板, 通知 main 進(jìn)程截圖完畢, 并附帶圖片的 base64 url, 然后關(guān)閉窗口
保存到文件
// 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 選擇保存文件名, 然后通過(guò) fs 模塊寫(xiě)入文件
最終整體目錄結(jié)構(gòu)
├── index.html
├── lib // 截圖核心代碼
│ ├── assets // font 和 聲音資源
│ ├── capture-main.js // main 中截圖部分代碼
│ ├── capture-renderer.js // 截圖交互代碼
│ └── capture.html // 截圖 html
├── main.js
└── package.json
關(guān)于“如何使用electron實(shí)現(xiàn)一個(gè)截屏工具”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。
分享文章：如何使用electron實(shí)現(xiàn)一個(gè)截屏工具-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/csjddh.html
重慶分公司
重慶分公司
