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

【问题标题】：Is there a way to use JavaScript to crop & resize an image before displaying it?有没有办法在显示之前使用 JavaScript 裁剪和调整图像大小？
【发布时间】：2011-12-10 04:02:22
【问题描述】：

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

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

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

【问题讨论】：

如果您要下载大量图像，最好首先将它们作为缩略图提供，以避免因加载大图像文件而减慢初始页面加载速度。
如果你只想resize（而不是crop）它们，你可以通过CSS强制<img>标签尺寸。跨度>
在服务器上处理它们更节省带宽。
...如果您想模拟裁剪，只需将其偏移到您希望显示的点，就像使用 CSS 精灵一样。
您要裁剪还是调整大小？可以在 HTML 中调整大小（只需设置图像的宽度和高度）。

标签： javascript jquery image crop image-resizing

【解决方案1】：

您可以将每个图像放置在具有固定尺寸和overflow: hidden 的块容器中，从而有效地裁剪它们（您也可以将图像放置在具有负值top 和left 的容器中以选择图像的哪一部分图像将可见）。所有这些都是标准的 CSS 票价。在网格布局中显示元素也是如此。 See an example。

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

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

【讨论】：

非常感谢。我意识到加载图像会有点慢，但应该不会太多，希望它们在尺寸上得到优化。

【解决方案2】：

JS 不能直接裁剪/调整图像大小，除非您使用 <canvas> 标记。最多它可以通过将图像放入具有溢出的另一个元素中来伪造裁剪：隐藏并调整偏移/边界。您可以通过设置图像的高度/宽度/缩放 CSS 属性来伪造调整大小。

但如果您担心带宽问题，请考虑客户端调整大小需要客户端从您的服务器加载全尺寸图像，然后才能对其进行任何类型的调整。

【讨论】：

【解决方案3】：

Javascript 是一种客户端语言。因此，必须先下载图像，然后 javascript 才能控制它们。如果您要加载大量图像，最好制作一个服务器端脚本，以便在加载图像之前对其进行裁剪。

【讨论】：

【解决方案4】：

也许这不完全是基于 Javascript 或 Jquery 的解决方案，但此脚本可以在电子商务网站或其他页面充满缩略图的网站上提供很大帮助。它有缓存机制，所以图像只处理一次： http://shiftingpixel.com/2008/03/03/smart-image-resizer/

【讨论】：