在显示图像并将原始图像加载到RAM之前,是否可以缩小(实际调整)图像的比例?

我正在构建一个电子应用程序(chrome+node.js),其目标是显示指定文件夹的所有图像。

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

问题:

我需要它将所有图像显示为 64x64 缩略图,但因为它们被加载为 <img> 元素,原始图像被加载到RAM中,只有在CSS“调整”它们的大小后 width: 64px; height: 64px 但是它不是真的,它仍然在RAM中保存原始图像,因此显示300个图像(1MB-20MB)需要大约3.5GB的RAM。

问题:

所以,我想知道有没有更简单的方法 64×64 图像的缩略图并在网页上显示而不是原始图像?

在显示图像之前(即在将图像加载到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')
}

另一种方法是调整图像的大小 64×64 具有 jimp 把它们保存到磁盘上。很慢,但我可以用一个网络工作者把这个工作发送到另一个核心