如何實現基於Electron的截圖識字App（一）

時間 2019-11-06

標籤如何實現基於 electron 截圖識字 app 简体版

原文原文鏈接

背景

以前看了下face++的接口，作了人臉融合簡單demo,順便瞧了瞧其餘的接口，看到一個識別圖片文字的接口，忽然靈機一動。javascript

平時本身看到一些有趣的圖文，裏面的文字就想敲下來放印象筆記裏或者朋友圈裏裝一下文藝。可是關鍵這裏還要手動敲，若是截圖的時候，直接就把文字複製到剪貼板就行了。因而就有了這個應用，實現並不複雜。你們跟我一塊兒過一遍吧，喜歡的能夠star~css

開始

初始化一個electron應用

參考electron官網，打造你的第一個electron應用html

$ yarn add electron -D
複製代碼

目錄結構前端

├─ src
│  └─ main.js    #入口文件，主進程
│  └─ index.html # 渲染進程的頁面
複製代碼

package.json的scripts字段添加如下java

"start": "electron src/main.js"
複製代碼

入口文件

electron進程分爲主進程和渲染進程。渲染進程至關於前端的UI渲染,能夠類比成chrome的一個tab頁,一個tab就是一個進程。渲染進程由主進程管理，主進程至關於chrome的窗口，關閉全部tab頁面還在的那個窗口。有些功能模塊只能由主進程來調用，渲染進程同理（好比截屏這個就只能在渲染進程）node

咱們的需求是linux

只須要一個托盤叫作tray（mac右上角，win右下角），不須要打開具體的窗口界面

CmdOrCtrl+Shift+V爲截圖快捷鍵

const { app, BrowserWindow,  globalShortcut ,Tray,Menu,ipcMain} = require('electron')

const shell = require('electron').shell;

const path=require('path')

let win

let srcPath=path.join(__dirname,"../src")

let clip=true
//建立托盤
function createTray () {
    tray = new Tray(`${srcPath}/images/font.png`) // 指定圖片的路徑，在github裏有
    const contextMenu = Menu.buildFromTemplate([ //Menu類型有checkbox，radio，normal等
        { label: 'clip', type: 'checkbox',click(){
            clip=!clip
        },checked:true },
        { label: 'about', click(){
            //打開默認瀏覽器
            shell.openExternal('https://github.com/yokiyokiyoki/clip-font-app');
        } },
        { label: 'exit',click(){
            app.quit()
        }}
    ])
    tray.setToolTip('圖圖識字')
    tray.setContextMenu(contextMenu)
    //註冊快捷鍵
    globalShortcut.register('CmdOrCtrl+Shift+V', captureScreen)
    globalShortcut.register('Esc', () => {
        if (win) {
            win.close()
            win = null
        }
    })
}

function createCaptureWindow() {
    // 建立瀏覽器窗口，只容許建立一個（必須得建立，由於只有渲染進程才能截圖）
    if(win)return console.info('只能有一個CaptureWindow')
    const { screen } = require('electron') //由於ready才能夠引入
    let { width, height } = screen.getPrimaryDisplay().bounds
    win = new BrowserWindow({ 
        fullscreen: process.platform !== 'darwin' || 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,
        webPreferences: {
            webSecurity: false //能夠加載本地文件，這裏不寫的話，打包後會報錯：不容許你加載本地文件
        }
    })

    win.setAlwaysOnTop(true, 'screen-saver') // mac
    win.setVisibleOnAllWorkspaces(true) // mac
    win.setFullScreenable(false) // mac

    // 而後加載應用的 index.html。
    win.loadFile(path.join(__dirname,'../index.html'))

    // 打開開發者工具
    win.webContents.openDevTools()

    // 當 window 被關閉，這個事件會被觸發。
    win.on('closed', () => {
        win = null
    })
}
app.on('ready', createTray)
// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
    // 不然絕大部分應用及其菜單欄會保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (win === null) {
        createCaptureWindow()
    }
})

function captureScreen(){
    if(clip){
        createCaptureWindow()
    }
}
複製代碼

編寫index.html

上面咱們經過主進程loadfile打開了index.html。這裏咱們能夠作一個粗淺的UI,須要有尺寸信息，工具欄等。是基於全屏的html，爲何要這麼作？你能夠思考一下~git

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>截屏</title>
  </head>
  <style> html, body, div { margin: 0; padding: 0; box-sizing: border-box; } .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .rect { position: absolute; display: node; 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{ display: inline-block; cursor: pointer; } </style>
  <body>
    <!--背景爲灰色的遮罩層-->
    <div class="bg"></div>
    <div id="mask" class="mask"></div>
    <canvas class="rect"></canvas>
    <!--尺寸信息-->
    <div class="size-info">200*200</div>
    <!--toolbar-->
    <div class="toolbar">
      <div class="iconfont icon-close" >關閉</div>
      <div class="iconfont icon-check" >確認</div>
      <div class="iconfont icon-literacy" >識別</div>
    </div>
    <script src="./src/js/capture.js"></script> <!--如今還沒寫-->
  </body>
</html>
複製代碼

至此咱們已經能夠經過npm start進行開發，經過快捷鍵CmdOrCtrl+Shift+V看到這個頁面了，而且托盤也已經如今左上角。若是報錯，請審視上述之流程。github

截屏功能實現

咱們把邏輯寫在capture.js裏面web

electron 提供了截取屏幕的 API(desktopCapturer)，能夠輕鬆的獲取每一個屏幕（存在外接顯示器的狀況）和每一個窗口的圖像信息。能夠先去了解一下~

原理(其實很簡單，就是兩個canvas)：

1.經過electron提供截取全屏生成的dataURL,用drawImage存在一個特殊的canvas（姑且稱之爲全屏canvas）裏面（dataURL和cavas的相愛相殺）,再把這個dataURL賦給背景，讓空白背景圖，變成剛剛全屏的樣子（假象），再加上半透明的遮罩。

2.經過另一個canvas（選區canvas）來製做選區，鼠標位置來肯定——getImageData（x,y,w,h），這個選區在全屏canvas裏的imgData，而後把全屏canvas的數據導過來這個選區canvas——putImageData(imgData, x, y)

const {  desktopCapturer, screen } = require('electron')
const { bounds: { width, height } } = screen.getPrimaryDisplay()
const path=require('path')

const {Draw} = require(`${__dirname}/src/js/draw.js`)

desktopCapturer.getSources({
    types: ['screen'],
    thumbnailSize: {
        width, height
    }
}, async(error, sources) => {
    if (error) return console.log(error)
    let screenImgUrl = sources[0].thumbnail.toDataURL() //獲取dataURL
    
    let bg=document.querySelector('.bg')
    let rect=document.querySelector('.rect')
    let sizeInfo=document.querySelector('.size-info')
    let toolbar=document.querySelector('.toolbar')
    /** * 繪製類 * ScreenImgUrl是整個屏幕base64格式的快照 * bg是背景dom * width是屏幕寬高 * rect是選區canvas * sizeInfo 尺寸信息容器 * toolbar 工具欄 */
    let draw=new Draw(screenImgUrl,bg,width,height,rect,sizeInfo,toolbar)
    document.addEventListener('mousedown',draw.startRect.bind(draw))
    document.addEventListener('mousemove',draw.drawingRect.bind(draw))
    document.addEventListener('mouseup',draw.endRect.bind(draw))
})
複製代碼

Draw類寫了截圖選區是如何實現的，這裏實在有些長，能夠移步github。主要就是經過鼠標畫一個矩形，而後把全屏canvas的數據經過位置定位到具體，而後導入。

若是咱們點擊工具欄中的關閉，實際上是須要銷燬整個窗口的。這裏涉及到了渲染進程和主進程間通訊的問題，須要IPC模塊—— IPCMain和 ipcRenderer ~

//渲染進程發送消息
ipcRenderer.send('clip-page', { type: type, message: msg })

//主進程接收
ipcMain.on('clip-page', (event, {type,msg}) => {
    if(type==='close'){
        if (win) {
            win.close()
            win = null
        }
    }
})
複製代碼

打包

咱們在開發模式下試了下，以爲應該沒有問題了。這時候來打包成各平臺上的應用，供用戶實際使用~

這裏咱們選用electron-builder，在package.json新建一個腳本命令，同時新增一個build字段（electron-builder自動讀取）

"scripts": {
    "start": "electron src/main.js",
    "build": "electron-builder",
},
"build":{
    //名字
    "productName": "clip-font-app",
    "appId": "Personal.DesktopApp.ClipFont.1.0.0",
    "directories": {
        //打包目錄
      "output": "dist"
    },
    "files": [
    //全部文件
      "./**/**"
    ],
    //win下的安裝嚮導
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "src/images/icon.ico",
      "uninstallerIcon": "src/images/icon.ico",
      "installerHeaderIcon": "src/images/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "ClipFont"
    },
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          //是否拖到應用目錄
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "src/images/icon.icns"
    },
    "win": {
      "icon": "src/images/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "src/images"
    },
    //下載源爲淘寶鏡像，國內某些緣由可能會致使失敗
    "electronDownload": {
      "mirror": "http://npm.taobao.org/mirrors/electron/"
    }
}
複製代碼