是否可以在显示图像并将原件加载到 RAM 之前缩小（实际调整大小）图像？

Question

我正在构建一个 Electron 应用程序 (Chrome + Node.js)，其目标是显示指定文件夹的所有图像。

这是一个应用程序，所以所有的图像都已经在磁盘上，不需要下载任何东西。

问题：

我需要它将所有图像显示为64x64 缩略图，但由于它们被加载为<img> 元素，原始图像被加载到 RAM 中并且只有在 CSS 将它们“调整大小”为width: 64px; height: 64px ，但事实并非如此，它仍将原始图像保存在 RAM 中，因此显示 300 张图像（1mb-20mb）需要大约 3.5 GB 的 RAM。

问题：

所以，我想知道是否有更简单的方法来获取图像的 64x64 缩略图并在网页上显示它而不是原始图像？

是否有可能在显示之前（即在将它们加载到 RAM 之前）使浏览器缩小（实际上将图像大小调整为 64x64）？

试过了：

我尝试使用<canvas> 而不是<img>，但它使应用在滚动时变得迟缓，因为它的计算量非常大（~0.1 毫秒/图像）。我想将其发送给网络工作者，但无法做到。

// 我在那里使用 vue.js

// THIS TAG IS INSIDE A V-FOR LOOP SO A CANVAS TAG IS CREATED FOR EACH ITEM IN THE LIST
<canvas :id="'item-' + props.index"> 
  {{drawThumbnails(props.item.path, props.index)}} 
</canvas> 

drawThumbnails (path, canvasId) {
  console.time('draw time')
  var image = new Image(); 
  image.onload = function() {
    var canvas = document.getElementById(canvasId);
    canvas.width = 64;
    canvas.height = 64;
    canvas.getContext("2d").drawImage(image, 0, 0, 64, 64);
  }
  image.src = path
  console.timeEnd('draw time')
}

我想我可以做到这一点的另一种方法是使用jimp 将图像大小调整为64x64 并将它们保存到磁盘。这很慢，但我可以使用网络工作者将此作业发送到另一个核心

Answer 1

不加载原始图像的唯一方法是将调整大小的缩略图也保存到磁盘并加载它。

这取决于这些图像的来源。

如果它们是由您创建并与应用预打包，您可以自己调整大小并打包每个图像的两个版本（例如 myimage_500x500.png 和 myimage_64x64.png）。

如果图像是由应用程序创建的，即应用程序在用户的 PC 上运行，从某个来源获取图像数据并将其写入磁盘，那么它也可以创建缩略图并将其保存。一个很好的实用程序是sharp:

const sharp = require('sharp');
const fs = require('fs');

const imageBuffer = getImage() // Data from some source

fs.writeFile('image.png', imageBuffer, (err) => {
  if (err) return callback(err)

  sharp(originalImageBuffer)
    .resize(64, 64)
    .toFile('image_64x64.png', callback);
});

如果图像在用户的硬盘驱动器上，但应用程序尚未将图像放置在该位置（即您只是访问现有文件夹），那么您也需要进行上述调整大小，但由其他一些事件触发。例如。首次显示图像或定期检查新图像时。

---

还有一种方法可以不必将缩略图存储在磁盘上，但也不必在显示大图像时保持加载。 如果您添加和 express 应用程序或类似的东西，您可以让您的 <img> 标签从 express 处理的路线请求他们的图像，然后从磁盘加载图像并在运行中调整大小。

一旦请求完成，大图像将被垃圾收集，前端只显示小缩略图。