使用 Javascript/jQuery 裁剪图像答案

【问题标题】：Using Javascript/jQuery to crop image使用 Javascript/jQuery 裁剪图像
【发布时间】：2012-07-06 02:59:16
【问题描述】：

我有一个显示几个缩略图的页面。当用户将鼠标悬停在这些图像上时，将出现一个显示完整图像的模式窗口。

问题：为了节省空间，我只想在服务器上存储1个版本（原始版本）的图像，并在客户端“动态”创建缩略图，可能使用 javascript/jquery 进行裁剪（无需调整大小）。这可能吗？

我已经看到（但没有尝试过）那些 jquery 裁剪插件，它们似乎具有许多功能，例如交互式裁剪工具。我不需要这些功能，只想使用 javascript 进行裁剪。最有可能在图像中心使用重力进行裁剪。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以使用 css 从中心部分裁剪图像。

见demo

<div class="content">
<img src="http://www.letsgodigital.org/images/producten/2086/testrapport/nikon-p90-picture.jpg" width="400" height="400" />
</div>

.content {
width:200px;//require width
height:200px;//require height
overflow:hidden;    
}
.content img {
margin-left:-50%;
 margin-top:-50%;   
}

【讨论】：

【解决方案2】：

要获得等价的裁剪，一种 css 解决方案是在每个全尺寸图像的外部容器上使用 overflow:hidden。

假设你想要 50px x 50px 的缩略图：

<div id="thumbnail_1" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>  <!-- this is the full-size image -->
</div>

<div id="thumbnail_2" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>

<div id="thumbnail_3" style="overflow: hidden; width: 50px; height:50px"> 
  <img src="..."/>
</div>

【讨论】：