有没有一种方法可以使用JavaScript裁剪&在显示图像之前调整图像大小? [英] Is there a way to use JavaScript to crop & resize an image before displaying it?

问题描述

我有一堆要保存在第三方服务器上的图像，并希望以缩略图形式显示在网页上...

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

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

查看示例 .

但是，请注意，这种解决方案虽然几乎不需要任何准备，但是看似容易遵循. 对于您在页面中显示的每个裁剪的元素，用户仍然必须下载完整的，未裁剪的图像，这可能会导致大量MB数据.

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

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...

Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?

Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..

解决方案

You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.

However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.

Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.

这篇关于有没有一种方法可以使用JavaScript裁剪&在显示图像之前调整图像大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！