有没有一种方法可以使用JavaScript来裁剪&在显示图像之前调整图像的大小

Is there a way to use JavaScript to crop & resize an image before displaying it?

本文关键字：图像显示图显示调整裁剪一种方法 JavaScript 可以使有没有更新时间：2023-09-26

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

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

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

您可以将每个图像放入具有固定尺寸和overflow: hidden的块容器中，从而有效地裁剪它们(您也可以将图像放置在具有负top和left值的容器中，以选择图像的哪一部分将可见)。所有这些都是标准的CSS费用。在网格布局中显示元素也是如此。参见示例

然而，请注意，这种解决方案虽然几乎不需要任何准备，但可能很容易遵循。用户仍然需要为页面中显示的每个裁剪元素下载完整的未裁剪的图像，这可能会产生许多mb的数据。

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

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

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

但是如果你担心带宽，考虑到客户端调整器需要客户端从你的服务器加载一个完整尺寸的图像，在它可以做任何调整之前。

Javascript是一种客户端语言。因此，在javascript控制图像之前，必须先下载图像。如果你要加载很多图片，最好在加载之前编写一个服务器端脚本来裁剪图片。