javascript - 使用 img 标签自动调整大小或 Canvas 重绘来调整缩略图图像预览大小？

Question

在我的基于 html5 的移动应用程序中，我有一个图像 uploader ，它具有与其他任何功能一样的非常基本的功能 - 选择要上传的图片后会显示图像缩略图。为了调整缩略图大小以进行预览，我尝试了两种方法:

1. 只需在 img 标签上设置宽度和高度，然后让浏览器调整大小
2. 使用 Canvas 显式地将图像大小调整为我想要的大小。

我需要一些帮助来选择走哪条路。因此，根据我的一些不同测试，我将它们归结为这些观察到的优点和缺点。

速度

使用canvas调整大小时，在javascript中完成工作比仅设置img标签的src需要更多时间。然而，我的观察是，一旦使用 canvas 调整图像大小，显示速度比使用 img 标签快得多。

例如，在我添加要显示的 Image 对象后，大约需要 1 到 2 秒才能看到图像。而在 drawImage 方法完成基于 Canvas 的大小调整后，几乎不需要任何时间就可以看到图像。这让我想到，img 标签的实际调整大小仅在图像添加到 View 中时发生？

无论如何，img 和 canvas 的舍入速度大致相同，并且在不同区域使用的时间分布不同。

内存

我需要有人告诉我这是否属实？

1. 在 Img 标记中，尽管在显示时调整了图像大小，但仍存储图像的完整尺寸信息。
2. 当然，在 Canvas 中，图像已经被重新绘制为较小尺寸的图像，因此只有较小的图像信息占用内存。

那么使用 Img 标签会不必要地占用更多内存吗？ (仅用于缩略图显示目的)

缩略图质量

这实际上我并不关心，因为我的缩略图相当小。但我敢打赌它们无论如何都会相似，Img 标签在浏览器之间有更多的变化？

Answer 1

1. 确实如此。
2. 确实如此。好吧，差不多了。 Canvas 方法也占用内存，但它是暂时的。完成 Canvas 转换后，您基本上就释放了该内存。

是的，img 方法不必要地占用更多内存。

IMO，使用 img 方法您的缩略图质量不会很好。

我之前使用 Canvas 方法调整过大小。让我来挖掘一下。

更新 之前在 Stack Overflow 上我已经回答了我自己关于 Creating square thumbnails of images 的问题。 。在我的回答中，我发布了我自己最终使用了 canvas 方法。

此外，根据我的经验， Canvas 方法也相当快。在canvas方法中花费的时间不到1到2秒。