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

Question

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

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

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

Answer 1

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

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

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