我能使用JavaScript调整图片大小吗（不是缩放，而是真正的调整大小）？

Question

我需要动态加载并显示大量图片，可能会有1000-3000张。通常这些图片的尺寸不同，我从用户那里获取它们的URL。因此，其中一些图片可能是1024x800或者10x40像素。

我编写了一个不错的JS脚本，在一页上漂亮地展示它们（类似于Google图像搜索风格），但它们在使用的RAM上仍然非常重（一页上有一百个500K的图片不好），所以我考虑了真正调整图片大小的选项。例如将1000x800像素的图像调整为100x80像素，然后忘记（释放RAM）原始图像。

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

- David

Answer 1

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

显示15张图片，然后用户点击“下一页”，下一页就会显示。

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

如果这样的东西不是你想做的。也许你想做一个图像拼贴，那么你可以检查CSS3转换。我认为它们应该很快。

- Nerian

---

我对分页（追加到底部）没有问题。问题是我想要展示成千上万张图片，而我不希望浏览器挂起或变得无响应。 - David

Answer 2

你想要做的是减轻客户端的压力，以便它可以处理所有的图片。让它调整所有的图片（JavaScript是客户端的）实际上会产生相反的效果，因为调整图片的成本通常比仅仅显示图片要高得多（而且在浏览器JS中也不可能实现）。

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

- Daff

---

这是要求...它甚至可能超过那个数量（约10k）。需要考虑一些创造性的解决方法。 - David

是的，这可能需要采用创意方式，因为按照您描述的方式无法满足该要求。 - Daff

Answer 3

没有原生的JS方式来做到这一点。你可以使用Flash进行一些黑客式的操作，但是最好还是在服务器端调整图片大小，因为：

1. 调整后的图片传输给客户端时可以节省带宽。
2. 客户端可以缓存这些图片。
3. 页面加载速度更快。
4. 内存中可以容纳更多的缩略图，所以需要更少的分页。
5. 其他...

- nedk

---

图片不在我的服务器上，我希望为客户节省带宽。我无法知道图片的大小，甚至更糟糕的是，不知道图片是否真实存在。 - David

然后使用代理。当原始文件在客户端上时，无法避免客户端负载。 [作者声明] -> ImageResizer 是一个服务器端模块，可以代理图像请求并动态调整大小/重新压缩它们，以便客户端只获取所需的最小字节数。 - Lilith River

Answer 4

我相信在支持canvas的浏览器中可以完成这个任务。如果您想采用这种方法，您应该从这里开始。

我看到了使用canvas方法可能会遇到两个问题：

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

以下是一些canvas调整大小图像的漂亮图片：

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

- David Murdoch