使用Javascript/jQuery裁剪图像

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

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

---

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

要获得与裁剪等效的效果，css解决方案之一是在每个全尺寸图像的外部容器上使用

溢出：隐藏

假设您想要50px 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>

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

看


​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
​.内容{
宽度：200px；//需要宽度
高度：200px；//需要高度
溢出：隐藏；
}
.内容img{
左边缘：-50%；
利润率最高：-50%；
}

​

<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%;   
}