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

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

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

问题: 我需要它将所有图像显示为

64x64

缩略图，但因为它们是作为

另一种方法是使用
jimp
将图像大小调整为
64x64
，并将其保存到磁盘。这相当慢，但我可以使用web worker将此作业发送到另一个core
不加载原始图像的唯一方法是将调整大小的缩略图保存到磁盘，然后加载

这取决于这些图像的来源

如果它们由您创建并与应用程序一起预打包，您可以自行调整大小并打包每个图像的两个版本（例如
myimage\u 500x500.png
和
myimage\u 64x64.png
）

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

如果图像位于用户硬盘上，但应用程序未将其放置在硬盘上（即，您只需访问现有文件夹），则您也需要执行上述调整大小操作，但会由其他事件触发。例如，首次显示图像或定期检查新图像时


还有一种方法不必在磁盘上存储缩略图，也不必在显示大图像时加载它。
如果您添加和
express
应用程序或类似程序，您可以让您的
标签从express处理的路径请求其图像，然后express从磁盘加载图像，并使用sharp动态调整大小

一旦请求完成，大图像将被垃圾收集，前端仅显示小缩略图。
在处理请求时，您可以在航班上制作任意大小的图像副本。经典的最佳实践是将实际的缩略图托管在您的服务器上，这样您就不会每次下载20mb的图片。。。这很简单，而且很有效。如果您根据请求执行任何调整大小的操作，您的服务器可能会在一小时内停机。让浏览器加载原始服务器是不好的做法。按需生成不同版本，将其缓存在服务器上，并仅将所需版本发送到浏览器。客户端缓存将由浏览器负责，不用担心。可能使用ETag和/或如果修改了自标题。“在显示图像之前（意味着在将图像加载到RAM之前），浏览器是否可能缩小尺寸（实际上将图像大小调整为64x64）？”-它需要首先解压缩原始图像，甚至在出现缩小尺寸的情况之前。除非你希望它在一张纸或其他东西上这样做，当然这意味着RAM。@sjahan这是一个应用程序，所有图像都位于本地磁盘感谢你的回答，看起来我无法逃避将缩略图保存到磁盘上。我想也许有一种方法可以用CSS来调整图像的大小，而不是缩小原始图像的大小。我想我现在明白了“实际调整大小”和“缩小比例”的区别。我在回答中增加了一个部分。感谢您对express server的解释和想法！我想我可以直接在函数中传递图像路径并使用
sharp
生成缩略图，然后用缩略图创建
，这样它就不会真正显示原始图像
// 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')
}

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);
});