我可以使用 JavaScript 调整图像大小（不是缩放，真正调整大小）答案

【问题标题】：Can I resize images using JavaScript (not scale, real resize)我可以使用 JavaScript 调整图像大小（不是缩放，真正调整大小）
【发布时间】：2011-06-04 23:03:26
【问题描述】：

我需要动态加载大量图像并将其显示在屏幕上——可能是 1000 到 3000 个。通常这些图片大小不同，我从用户那里获取它们的 URL。因此，其中一些图片可以是 1024x800 或 10x40 像素。

我写了一个很好的 JS 脚本，在一页上很好地展示了它们（ala Google 图片搜索风格），但它们在 RAM 上的使用仍然很重（一页上一百个 500K 的图像并不好），所以我想到了真正调整图像大小的选项。就像制作一个 1000x800 像素的图像，比如 100x80，然后忘记（释放内存）原始图像。

这可以使用 JavaScript 完成吗（无需服务器端处理）？

【问题讨论】：

标签： javascript image web-applications resize

【解决方案1】：

我会建议一种不同的方法：使用分页。

例如显示 15 张图片。然后用户点击“下一页”并显示下一页。

或者，更好的是，您可以编写脚本，在用户到达页面末尾时自动加载下一页。

如果这样的事情不是你想做的。也许你想做一个图像拼贴，然后也许你可以检查 CSS3 变换。我认为他们应该很快。

【讨论】：

我对分页没有问题（附加到底部）。问题是我要显示数千张图片，并且我不希望浏览器挂起或无响应。

【解决方案2】：

您要做的是从客户端承受一些压力，以便它可以处理所有图像。让它调整所有图像的大小（JavaScript 是客户端）将完全相反，因为实际调整图像的大小通常比仅显示它更昂贵（而且无论如何使用浏览器 JS 都不可能）。

通常总有比一次显示那么多项目更好的解决方案。一种是动态加载，例如当用户向下滚动页面（就像新的 Facebook 个人资料一样）或使用分页时。我无法想象所有 1k 到 3k 的图像都会同时显示出来。

【讨论】：

这是要求...它甚至可以超过（~10k）。需要考虑一些创造性的方法来解决这个问题
是的，它可能必须是一种创造性的方式，因为该要求不可能满足您描述的方式。

【解决方案3】：

没有原生的 JS 方法可以做到这一点。您可能可以使用 Flash 破解某些东西，但您确实应该调整服务器上的图像大小，因为：

将那些 500K 大图像传输到客户端，您将节省带宽。
客户端将能够缓存这些图像。
您将获得更快的加载页面。
您将能够在内存中容纳更多的缩略图，因此需要更少的分页。
更多...

【讨论】：

图片不在我的服务器上。我想为客户端节省带宽，我无法知道图像的大小，甚至最糟糕的是，不知道图像是否真的存在。
然后使用代理。当原件在客户端时，您无法避免客户端加载。 [作者免责声明] -> ImageResier 是一个服务器端模块，可以代理图像请求并动态调整大小/重新压缩它们，因此客户端只获得所需的最小字节数。

【解决方案4】：

我（非常）确定它可以在支持画布的浏览器中完成。如果这是你想走的路，你应该从here开始。

我发现了画布方法可能存在的问题：

调整许多图像的大小可能需要很长时间（相对而言）。因此，您可能不得不考虑使用webworkers。
如果您从 DOM 中删除图像和/或 delete/null 对这些图像的所有引用，浏览器是否会真正释放内存？我不知道。

还有一些画布调整大小的漂亮图片：

这个答案需要忍者：--> Qk

【讨论】：