有没有办法在显示图像之前使用JavaScript裁剪和调整图像大小？

Question

我在第三方服务器上保存了一堆图像，我想加载并在网页上显示为缩略图...

我可以使用JavaScript加载每个图像，裁剪并调整它们的大小相同，然后将它们显示在页面的网格中吗？

理想情况下，我希望能够在客户端做到这一点。 我真的不想在服务器上预先加载和处理它们，因为我不想增加带宽使用量。

Answer 1

您可以将每个图像放在具有固定尺寸和overflow: hidden的块容器内overflow: hidden ，从而有效地裁剪它们（您还可以将图像放在容器内，并使用负值的top和left值来选择图像的哪个部分可见）。 所有这些都是标准的CSS票价。 在网格布局中显示元素也是如此。 看一个例子 。

但是，请注意，这种解决方案虽然几乎不需要准备，但看起来很容易理解。 用户仍然必须为您在页面中显示的每个裁剪元素下载完整的未剪切图像 ，这可能会变成许多MB数据。

根据您的用例，采用预处理图像的服务器端解决方案可能更为可取。

Answer 2

也许这不是基于Javascript或Jquery的解决方案，但是这个脚本可以在电子商务网站或其他类型的网页上充满缩略图的网站上提供很多帮助。 它具有缓存机制，因此图像只处理一次： http ： //shiftingpixel.com/2008/03/03/smart-image-resizer/

Answer 3

除非您使用<canvas>标记，否则JS无法直接裁剪/调整图像大小。 最多可以通过将图像放入具有溢出的另一个元素来伪造裁剪：隐藏和调整偏移/边界。 您可以通过设置图像的高度/宽度/缩放CSS属性来伪造调整大小。

但是，如果您担心带宽，请考虑客户端调整器要求客户端从服务器加载完整大小的图像，然后才能对其进行任何类型的调整。

Answer 4

Javascript是一种客户端语言。 所以在javascript可以控制它们之前必须首先下载图像。 如果您要加载大量图像，最好制作一个服务器端脚本，在加载图像之前裁剪图像。