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

Question

我需要动态加载并在屏幕上放置大量图像 - 它可能像1000-3000。通常这些图片大小不同，我从用户那里得到他们的网址。因此，其中一些图片可以是1024x800或10x40像素。

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

可以使用JavaScript（没有服务器端处理）来完成吗？

Answer 1

我建议采用不同的方法：使用分页。

显示15个图像。然后用户点击“下一页”，显示下一页。

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

我（非常）确定可以在支持canvas的浏览器中完成。如果这是您想要的路径，您应该开始here。

我看到了canvas方法可能出现的问题：

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

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

这个答案需要一个忍者： - ＆gt;的 Qk的