<canvas> 如何扭转局面 - 在浏览器中处理大图像-js教程-PHP中文网

DDD

发布： 2024-12-03 01:48:14

原创

564 人浏览过

How <canvas> 节省了时间 - 在浏览器中处理大图像节省了时间 - 在浏览器中处理大图像" />

客户上传了 28 张图像，每张大约 5800 x 9500 像素 和 28 MB 大小。当尝试在浏览器中显示这些图像时，整个选项卡冻结了 - 甚至拒绝关闭 - 长达 10 分钟。这是在配备 Ryzen 9 CPU 和 RTX 4080 GPU 的高端机器上进行的，而不是小型笔记本电脑。

情况如下

在我们的 CMS (Grace Web) 中，当管理员上传文件（无论是图片还是视频）时，我们会在上传完成后立即显示它。这对于用户体验来说非常好 - 它确认上传成功，他们上传了他们想要的内容，并且它显示了 UI 的响应能力以获得更好的感觉。

但是这些巨大的图像，浏览器几乎无法显示它们并冻结了。

需要注意的是，问题不在于上传本身，而在于显示这些大图像。同时一张一张地渲染 28 张巨大的图像实在是太多了。即使在空白页上，也只是...不。

为什么会发生这种情况（深入探讨）？

任何时候您在 <canvas> 如何扭转局面 - 在浏览器中处理大图像中显示图片时在图像加载和布局重新计算期间，浏览器会经历一个使用 CPU、RAM、GPU（有时甚至是驱动器）的整个过程，有时甚至会在显示图片之前多次循环执行此过程。它经历了计算像素、在硬件之间传输数据、插值算法等。对于浏览器来说，这是一个重要的过程。

集思广益的解决方案

我们考虑了几种选择：

上传后立即调整大小并显示缩略图
- 问题：调整大小可能需要太长时间，并且不能保证立即完成，特别是在调整大小队列不为空的情况下 - 导致系统不响应。
检查文件大小并仅显示大文件的名称
- 问题：这会降低用户体验，特别是对于那些需要对任何媒体材料进行更好控制和检查的用户（顺便说一句，这些材料通常是具有大文件的相同材料）。

这些解决方案都感觉不可用。我们不想限制管理员上传所需内容的能力，也不想在用户体验上做出妥协。

灯泡！使用

我记得

测试理论

我们决定替换 <canvas> 如何扭转局面 - 在浏览器中处理大图像带有

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
  // Resize canvas to desired size (for preview)
  canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
  canvas.height = 80;
  // Draw the image onto the canvas, resizing it in the process
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
  file_div.appendChild(canvas);
};

登录后复制