Electron实现图片集（4）

fengjutian
246 阅读1分钟

让我们用Electron做一些更高级的事情。动态生成一些HTML，并将其加载到浏览器中。

没有直接的功能，我们可以使用dataURL。

将数据URL加载到Web视图中

let { app, BrowserWindow } = require("electron")

let html = `
<!DOCTYPE html>
<html>
  <body>
    <h1>Welcome To The Internet!</h1>
  </body>
</html>
`

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadURL(`data:text/html;charset=utf-8,${encodeURI(html)}`)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

ARGV解析

我们传递生成的HTML，但它还没有做任何的事情。

让我们选择一个目录来显示图像。argv以electron .开头，所以只有第三个参数是图像目录。

let imageDir
let argv = process.argv

if (argv.length >= 3) {
  imageDir = argv[2]
} else {
  imageDir = `${__dirname}/images`
}

我们可以通过在浏览器中,检查此部分是否工作：

let html = `
<!DOCTYPE html>
<html>
  <body>
    <h1>Image Gallery - ${imageDir}</h1>
  </body>
</html>
`

可以将其运行：

$ npx electron . /path/to/images
$ npx electron .

查找目录中的所有图像

我们可以使用fs和path来获取目录中的所有图像。

let fs = require("fs")
let path = require("path")

let findImages = (dir) => {
  let files = fs.readdirSync(dir)
  files.sort()
  return files
    .filter(x => /.(png|jpg|jpeg|gif)/i.test(x))
    .map(x => path.join(dir, x))
}

显示图像

let html = `
<!DOCTYPE html>
<html>
  <head>
    <style>
      body { background-color: black; color: white; }
      img { padding: 10px; }
    </style>
  </head>
  <body>
    <h1>Image Gallery</h1>
    ${ findImages(imageDir).map(x => `<img src="file://${x}" />`).join("") }
  </body>
</html>
`

Web安全

这样应该工作，但它没有。让我们试着找出原因。

在Electron中，您可以在视图菜单并选择“Toggle Developer Tools”。或使用键盘快捷键，如Cmd-Option-I。你将打开Chrome调试工具！

在这种情况下，可以看到我们的图像请求都被阻止了。这就说得通了。让dataURL加载任意file:URL听起来不太安全。

由于这只是一个教程，我们禁用Web安全规则，而不考虑太多的后果。

function createWindow() {
  let win = new BrowserWindow({webPreferences: { webSecurity: false }})
  win.maximize()
  win.loadURL(`da` + `ta:text/html;charset=utf-8,${encodeURI(html)}`)
}

如果你正在编写一个Electron应用程序，你可能会这样做。因为你需要访问浏览器不会让你拥有的东西。如果是这样的话，你在很大程度上离开了浏览器的保护，你现在需要负责你的应用程序的安全性。

结果

代码

index.js

let fs = require("fs")
let path = require("path")
let { app, BrowserWindow } = require("electron")

let imageDir
let argv = process.argv

if (argv.length >= 3) {
  imageDir = argv[2]
} else {
  imageDir = `${__dirname}/images`
}

let findImages = (dir) => {
  let files = fs.readdirSync(dir)
  files.sort()
  return files
    .filter(x => /.(png|jpg|jpeg|gif)/i.test(x))
    .map(x => path.join(dir, x))
}

let html = `
<!DOCTYPE html>
<html>
  <head>
    <style>
      body { background-color: black; color: white; }
      img { padding: 10px; }
    </style>
  </head>
  <body>
    <h1>Image Gallery</h1>
    ${ findImages(imageDir).map(x => `<img src="file://${x}" />`).join("") }
  </body>
</html>
`

function createWindow() {
  let win = new BrowserWindow({webPreferences: { webSecurity: false }})
  win.maximize()
  win.loadURL(`data:text/html;charset=utf-8,${encodeURI(html)}`)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

原文：dev.to/taw/electro…

avatar
文章
阅读
粉丝