有没有办法使用 JavaScript 来裁剪和裁剪？在显示图像之前调整图像大小？
我在第三方服务器上保存了一堆图像，我想在网页上加载并显示为缩略图...
我可以使用 JavaScript 加载每个图像，裁剪它们并将它们调整为相同大小，然后显示它们在页面上的网格中？
理想情况下，我希望能够在客户端完成此操作。我真的不想在服务器上预加载和处理它们，因为我不想增加带宽使用量。
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..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以将每个图像放入具有固定尺寸和
overflow:hidden的块容器内，从而有效地裁剪它们（您还可以使用负top和 < 将图像定位在容器内） code>left 值来选择图像的哪一部分可见）。所有这些都是标准 CSS 费用。以网格布局显示元素也是如此。 查看示例。然而，请注意，这种解决方案虽然几乎不需要任何准备，但却很容易遵循。 用户仍然需要为页面中显示的每个裁剪元素下载完整的、未裁剪的图像，这可能会产生许多 MB 的数据。
根据您的用例，采用预处理图像的服务器端解决方案可能会更可取。
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 negativetopandleftvalues 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 或 Jquery 的解决方案，但此脚本可以对电子商务网站或页面充满缩略图的其他类型的网站有很大帮助。它有缓存机制，因此图像只处理一次：
http://shiftingpixel.com/2008/03/03/smart-image-调整大小/
Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once:
http://shiftingpixel.com/2008/03/03/smart-image-resizer/
JS 无法直接裁剪/调整图像大小，除非您使用
标签。最多它可以通过将图像放入具有溢出：隐藏的另一个元素并调整偏移/边界来伪造裁剪。您可以通过设置图像的高度/宽度/缩放 CSS 属性来伪造调整大小。但如果您担心带宽，请考虑客户端缩放器要求客户端从服务器加载全尺寸图像，然后才能对其进行任何类型的调整。
JS can't directly crop/resize an image, unless you're using a
<canvas>tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.
Javascript 是一种客户端语言。因此，必须先下载图像，然后 JavaScript 才能控制它们。如果您要加载大量图像，最好制作一个服务器端脚本，在加载图像之前对其进行裁剪。
Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.