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

Question

在我的基于html5的移动应用程序中，我有一个图像上传器，它具有与其他任何基本功能一样的基本功能 - 一旦选择了要上传的图片，就会出现图像缩略图。要调整缩小到缩略图大小以供预览，我已经玩过两种方式：

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

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

速度

使用canvas调整大小时，在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方法。

另外，根据我的经验，canvas方法也非常快。在canvas方法中，它需要不到1到2秒。