typescript 在Electron应用程序中有效地获取本地文件的缩略图

2ul0zpep  于 2023-06-30  发布在  TypeScript
关注(0)|答案(2)|浏览(141)

首先,请原谅我对电子和桌面应用程序的无知。我是一名Android开发人员,但我们的团队正在为PC/Mac开发Electron应用程序。该应用程序扫描您的计算机文件并备份它们,同时显示每个文件的缩略图。我们在快速加载这些缩略图时遇到了问题,因此结果速度慢且分辨率低。我们还被迫将缩略图编码为Base64字符串,以便将它们从代码的后端传递到前端。有没有更好的方法来为Electron应用程序做到这一点?
此外,在Android上,我们有一个名为Glide的优秀图像加载库,可以自动解决这个问题的许多复杂性。我们是否可以在Electron中使用一些类似的库?谢谢!

gkn4icbw

gkn4icbw1#

试试这个:

const { app } = require('electron')
const path = require('path')
const fs = require('fs')

const desktopPath = app.getPath('desktop')
console.log(desktopPath)
let filePaths = fs.readdirSync(desktopPath)
for (let filePath of filePaths) {
    app.getFileIcon(filePath).then((fileIcon) => {
        fs.writeFileSync(__dirname + `/images/img-${filePath}.png`, fileIcon.toPNG())
    })
}

Electron有自己的app模块,可以让你获得类似Desktop或Documents的路径,它还可以获取文件图标,并以JPEG或PNG格式输出。
我注意到你的问题有typescript标签,但是我不使用TypeScript,所以你需要转换它,但希望代码是类似的。

编辑

通过以下方式更改fileIcon.toPNG()来调整大小:

fileIcon.resize({
            height: 256,
            width: 256,
            quality: 100
        }).toPNG()
mrzz3bfm

mrzz3bfm2#

电子-v25.2.0

协议可用于避免手动传输。

app.whenReady().then(() => {
  protocol.handle("thum", async (request) => {
    let url = request.url.slice("thum:///".length);
    // The Windows implementation will ignore size.height and scale the height according to size.width.
    const image = await nativeImage.createThumbnailFromPath(url, {
      width: 200,
      height: 200,
    });
    return new Response(image.toPNG(), {
      headers: { "content-type": "image/png" },
    });
  });
});
<img src="thum:///D:\\a.jpg"

对我来说,getFileIcon基本上是垃圾。我不得不使用extracticon.exe来提取正确的图标

相关问题