时间戳

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

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

问题描述

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

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

问题：

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

问题：

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

这甚至可以让浏览器在显示它们之前缩小尺寸（实际上将图像大小调整为 64x64）（意思是在将它们加载到 RAM 之前）？

试过：

我尝试使用<canvas>而不是，<img>但它使应用程序在滚动时滞后，因为它的计算量非常大（~0.1ms / 图像）。我想把它发送给网络工作者，但做不到。

// 我在那里使用 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')
}

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

标签： javascripthtmlnode.jsbrowserbrowser-cache

解决方案

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

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

如果它们是由您创建并与应用程序预打包的，您可以自己调整大小并打包每个图像的两个版本（例如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 处理的路由中请求他们的图像，然后从磁盘加载图像并在运行时调整大小。

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

推荐阅读