使用Javascript / jQuery裁剪图像

Question

I have a page showing several thumbnail images. When the user mouseovers these images, a modal window showing the full image will appear.

Problem: In order to save space, I want to just store 1 version (the original version) of the image on the server, and create the thumbnail "dynamically" on the client side, probably doing a crop (no resize necessary) using javascript/jquery. Is this possible?

I have seen (but not tried) those jquery cropping plugins, which seem to have many features like a interactive cropping tool. I dont need these features, just want to crop using javascript. Most likely cropping with gravity in the center of the image.

Answer 1

You can use css to crop image from the center parte.

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

​

Answer 2

To get an equivalent of a crop, one css solution is to use overflow:hidden on an outer container of each full sized image.

Suppose you want 50px x 50px thumbnails:

<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>