javascript - Electron 图像的异步缩放

Question

我正在填充一个列表(在我的 Electron 应用程序中)，每个项目都显示磁盘中的高分辨率图像。
现在，由于列表越来越长，我遇到了性能问题:Electron 占用了大量 RAM，所以我想我需要以某种方式渲染缩略图。
Electron 提供an API for downscaling images .
但这是一个同步过程，因此不能选择缩小 UI 渲染，因为它会卡住 UI。
因此，当用户添加新图像时，需要这样做。
但是，我不太喜欢这个想法，因为我需要管理那些额外的缩略图文件。
这里有什么好的解决方案？我的想法是运行一个 http 服务器(express)，它负责提供图像的缩小版本，类似于这个 API:
http://localhost:30948/imageshrinker?image=imagedir/myimg.jpg&size=medium
这似乎要实现很多(特别是因为我认为我需要在另一个工作窗口中运行它？)而且我没有找到任何可以使用的库。
任何想法如何最好地解决这个问题？

Answer 1

如何使用 nativeImage.createThumbnailFromPath ?它返回 Promise ，因此您可以在初始化时显示一些加载/虚拟/闪光图像，并在特定 promise 解决时显示缩略图。通过适当的缓存管理(例如从 facebook 墙上已知的渲染 block )，即使加载 100 000 张图像也应该是轻而易举的事。
除此之外，当我遇到类似问题时，我做了一些研究，对我来说最好和(实际上)最快的库是 Sharp ，我从 Hasselblad 加载大小超过 100MB 的 JPG 图像，并为 Sharp 创建一组缩略图像 0.4 秒。这有点麻烦，因为您必须自己实现缩略图管理，但从长远来看，您会从中受益。在您的情况下，我将遵循以下算法:

在打开的文件上

创建 md5 校验和

比较 md5 和数据库条目，如果条目存在跳转到 7

在 Sharp 构造函数中打开图像，调整为所需值

保存到 temp/thumbnails 内的文件文件夹

  sharp(input)
  .resize(200, 300)
  .toFile(`thumbnails/${md5}.png`)
  .then(() => {
    // update list item with proper image source
  });

在原始 md5 校验和下使用缩略图源路径写入数据库条目

插入缩略图作为图像源

如果 Image.onError上升表示缩略图文件不存在，跳转到4

因此，您不必每次有人打开应用程序时都生成缩略图，只需记住不时清理缩略图目录，或者只是放弃将缩略图保存在本地的想法，只需将它们保存在内存中，根据请求显示并检查性能很好-可能是:

sharp(input)
  .resize({ width: 100, height: 100 })
  .toBuffer()
  .then(data => {
    tempImages[itemID] = nativeImage.createFromBuffer(data, {width: 100, height: 100})
  });