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

Daz*_*Kid 2 javascript jquery image crop image-resizing

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

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

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

Jon*_*Jon 7

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

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

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