缩略图图像预览使用 img 标签自动调整大小或画布重绘调整大小？

Question

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

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

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

速度

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

例如，在我添加要显示的 Image 对象后，大约需要 1 到 2 秒才能看到图像。而在 drawImage 方法完成基于画布的调整大小之后，几乎不需要时间就能看到图像。这让我认为 img 标签的实际调整大小只有在图像添加到视图中时才会发生？

不管怎样，img 和 canvas 都以大致相同的速度四舍五入，并在不同区域使用时间分布。

内存

我需要有人告诉我这是不是真的？

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

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

缩略图质量

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

Answer 1

1. 是的。
2. 是的。差不多吧。 Canvas 方法也需要内存，但它是暂时的。完成画布转换后，基本上就释放了内存。

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

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

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

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

另外，根据我的经验，画布方法也非常快。在画布方法中花费的时间不到 1 到 2 秒。