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

Question

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

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

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

速度

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

例如，在我添加要显示的图像对象后，大约需要 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 秒。