Using Javascript/jQuery to crop image

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.

Dips · Accepted Answer · 2012-07-06 04:08:29Z

2

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

answered Jul 6, 2012 at 4:08

Dips

3,2903 gold badges22 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kayo · Accepted Answer · 2012-07-06 03:31:24Z

1

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>

answered Jul 6, 2012 at 3:31

Kayo

9961 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using Javascript/jQuery to crop image

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related