在显示图像之前，有没有办法使用JavaScript来裁剪和调整图像的大小？
我有一堆图片保存在第三方服务器上，我想加载并显示为网页上的缩略图…
我可以使用JavaScript加载每个图像，裁剪和调整它们的大小，然后将它们显示在页面上的网格中吗？
理想情况下，我希望能够在客户端这样做。我真的不想在服务器上预先加载和处理它们，因为我不想增加带宽使用。
回答 4
Stack Overflow用户
发布于 2011-10-18 22:30:38
您可以将每个图像放入具有固定大小和overflow: hidden的块容器中，从而有效地裁剪它们(您还可以将图像放置在容器内，并使用负的top和left值来选择图像的哪一部分将是可见的)。所有这些都是标准的CSS费用。在网格布局中显示元素也是如此。。
但是，要注意的是，这种解决方案虽然几乎不需要准备，但可能很容易遵循。对于您在页面中显示的每个裁剪过的元素，用户仍然必须下载完整的未裁剪图像，这可能会导致大小为MB的数据。
根据您的用例，采用预处理图像的服务器端解决方案可能更可取。
Stack Overflow用户
发布于 2012-08-31 16:10:09
也许这并不完全是基于Javascript或Jquery的解决方案，但这个脚本在eCommerce网站或其他页面都是缩略图的网站上会有很大帮助。它有缓存机制，所以图像只被处理一次：http://shiftingpixel.com/2008/03/03/smart-image-resizer/
Stack Overflow用户
发布于 2011-10-18 22:30:56
JS不能直接裁剪图片或调整图片大小，除非你使用的是<canvas>标签。它最多只能通过将图像放入另一个具有overflow:隐藏和调整偏移/边界的元素中来伪造裁剪。您可以通过设置图像的高度/宽度/缩放CSS属性来伪造调整大小。
但是，如果您关心带宽，请考虑客户端大小调整程序要求客户端从您的服务器加载全尺寸图像，然后才能对其进行任何类型的调整。
https://stackoverflow.com/questions/7808889
复制相似问题
腾讯云开发者
