Electron使用指南—共享API (Shared API)_const image = clipboard

本文链接：https://blog.csdn.net/2401_84253894/article/details/139829219

// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

// Create a new BrowserWindow when app is ready
function createWindow () {

let primaryDisplay = electron.screen.getPrimaryDisplay()

mainWindow = new BrowserWindow({
x: primaryDisplay.bounds.x, y: primaryDisplay.bounds.y,
width: primaryDisplay.size.width/2, height: primaryDisplay.size.height,
webPreferences: { nodeIntegration: true }
})

// Load index.html into the new BrowserWindow
mainWindow.loadFile(‘index.html’)

// Open DevTools - Remove for PRODUCTION!
mainWindow.webContents.openDevTools();

// Listen for window being closed
mainWindow.on(‘closed’, () => {
mainWindow = null
})
}

// Electron app is ready
app.on(‘ready’, createWindow)

// Quit when all windows are closed - (Not macOS - Darwin)
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) app.quit()
})

// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on(‘activate’, () => {
if (mainWindow === null) createWindow()
})


#### 1.2 renderer.js

const electron = require(‘electron’)

const displays = electron.screen.getAllDisplays()

console.log( ${displays[0].size.width} x ${displays[0].size.height} )
console.log( ${displays[0].bounds.x}, ${displays[0].bounds.y} )
console.log( ${displays[1].size.width} x ${displays[1].size.height} )
console.log( ${displays[1].bounds.x}, ${displays[1].bounds.y} )

electron.screen.on( ‘display-metrics-changed’, (e, display, metricsChanged) => {
console.log( metricsChanged )
})

document.getElementsByTagName(‘body’)[0].addEventListener( ‘click’, e => {
console.log( electron.screen.getCursorScreenPoint() )
})


### 3、shell

Hello World!

<button onclick="showSite()">Launch Electron.js Site</button><br>
<button onclick="openSplash()">Open Splash.png</button><br>
<button onclick="showSplashFile()">Show Splash.png</button><br>
<button onclick="deleteSplashFile()">Delete Splash.png</button><br>

<script>

  const { shell } = require('electron')

  const showSite = e => {
    shell.openExternal('https://electronjs.org')
  }


  const splashPath = `${__dirname}/splash.png`

  const openSplash = e => {
    shell.openItem(splashPath)
  }
  const showSplashFile = e => {
    shell.showItemInFolder(splashPath)
  }
  const deleteSplashFile = e => {
    shell.moveItemToTrash(splashPath)
  }

</script>

```

4、nativeImage (本地图片)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Convert splash.png:</h1>

    <button onclick="toPng()">PNG</button>
    <button onclick="toJpg()">JPG</button>
    <button onclick="toTag()">Show</button>
    <br><img src="" id="preview">


    <script>

      const fs = require('fs')
      const { nativeImage, remote } = require('electron')

      const splash = nativeImage.createFromPath(`${__dirname}/splash.png`)

      const saveToDesktop = (data, ext) => {

        let desktopPath = remote.app.getPath('desktop')
        fs.writeFile( `${desktopPath}/splash.${ext}`, data, console.log )
      }

      const toTag = e => {

        let size = splash.getSize()

        let splashURL = splash.resize({ width: size.width/4, height: size.height/4 }).toDataURL()
        document.getElementById('preview').src = splashURL
      }
      const toPng = e => {
        let pngSplash = splash.toPNG()
        saveToDesktop( pngSplash, 'png' )
      }
      const toJpg = e => {
        let jpgSplash = splash.toJPEG(100)
        saveToDesktop( jpgSplash, 'jpg' )
      }

    </script>
  </body>
</html>

5、clipboard（剪贴板）

5.1 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>

    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <strong><script>document.write( process.versions.node)</script></strong>,
    and Electron <strong><script>document.write( process.versions.electron )</script></strong>.

    <br><button onclick="makeUpper()">Make clipboard uppercase</button>
    <br><button onclick="showImage()">Show clipboard image</button>

    <br><img src="" id="cbImage">

    <script>

      const { clipboard } = require('electron')

      console.log( clipboard.readText() )

      const showImage = e => {
        let image = clipboard.readImage()
        document.getElementById('cbImage').src = image.toDataURL()
      }

      const makeUpper = e => {
        let cbText = clipboard.readText()
        clipboard.writeText( cbText.toUpperCase() )
      }

    </script>
  </body>
</html>

5.2 main.js

// Modules
const {app, BrowserWindow, clipboard} = require('electron')

// 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 mainWindow

// Create a new BrowserWindow when `app` is ready
function createWindow () {

  clipboard.writeText('Hello from the main process!')

  mainWindow = new BrowserWindow({
    width: 1000, height: 800,
    webPreferences: { nodeIntegration: true }
  })

  // Load index.html into the new BrowserWindow
  mainWindow.loadFile('index.html')

  // Open DevTools - Remove for PRODUCTION!
  mainWindow.webContents.openDevTools();

  // Listen for window being closed
  mainWindow.on('closed',  () => {
    mainWindow = null
  })
}

// Electron `app` is ready
app.on('ready', createWindow)

// Quit when all windows are closed - (Not macOS - Darwin)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// When app icon is clicked and app is running, (macOS) recreate the BrowserWindow
app.on('activate', () => {
  if (mainWindow === null) createWindow()
})



还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！


王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。


对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！


【完整版领取方式在文末！！】


***93道网络安全面试题***


![](https://img-blog.csdnimg.cn/img_convert/6679c89ccd849f9504c48bb02882ef8d.png)








![](https://img-blog.csdnimg.cn/img_convert/07ce1a919614bde78921fb2f8ddf0c2f.png)





![](https://img-blog.csdnimg.cn/img_convert/44238619c3ba2d672b5b8dc4a529b01d.png)





内容实在太多，不一一截图了


### 黑客学习资源推荐


最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。

#### 1️⃣零基础入门


##### ① 学习路线


对于从来没有接触过网络安全的同学，我们帮你准备了详细的**学习成长路线图**。可以说是**最科学最系统的学习路线**，大家跟着这个大的方向学习准没问题。


![image](https://img-blog.csdnimg.cn/img_convert/acb3c4714e29498573a58a3c79c775da.gif#pic_center)


##### ② 路线对应学习视频


同时每个成长路线对应的板块都有配套的视频提供：


![image-20231025112050764](https://img-blog.csdnimg.cn/874ad4fd3dbe4f6bb3bff17885655014.png#pic_center)