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

Question

在我的基于html5的移动应用程序中，我有一个图像上传器，它具有与其他任何其他基本功能相同的图像上传器 - 一旦选择要上传的图片，就会显示图片缩略图。对于调整到缩略图大小预览的目的，我打得四处2种方式：

1. 只需设置宽度和高度上的img标签，让浏览器做调整大小
2. 用帆布明确调整图像下降到我想要的大小。

我需要一些帮助来选择要走哪条路。所以从我的一些不同的测试中，我把它们归结为这些观察到的利弊。

速度

它需要更多的时间使用帆布时不仅仅是设置的src img标签调整做的工作在JavaScript。然而，我的观察是，一旦图像用画布调整大小，显示比使用img标记快得多。

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

无论哪种方式，img和canvas都会以大约相同的速度与不同区域使用的时间分布向上取整。

内存

我需要有人告诉我，如果这是真的吗？

1. 在Img标签中，图片的全尺寸信息仍然存储，尽管它在显示屏上调整大小。
2. 当然，在画布上，图像已被重新绘制成较小尺寸的图像，因此只有较小的图像信息占用了内存。

因此，使用Img标签会不必要地占用更多内存？ （只是缩略图显示的目的）

缩略图质量

这个我其实真的不关心，因为我的缩略图是相当小的。但我敢打赌，他们会与Img标签类似，因为跨浏览器的差异更大？

Answer 1

1. 是的。
2. 确实。差不多。画布方法也需要记忆，但它是暂时的。一旦你完成了画布转换，你基本上已经释放了内存。

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

IMO，您的缩略图将不会与img方法的质量好。

我以前使用canvas方法完成了大小调整。让我挖掘它。

更新 此前的堆栈溢出我已经回答了我的问题有关Creating square thumbnails of images。在我的回答中，我发布了自己最终使用的画布方法。

另外，在我的经验中，画布方法也很快。它在画布方法中占用不到1到2秒的时间。