jquery - Is there a way to use JavaScript to crop & resize an image before displaying it? - Stack Overflow

admin管理员组

文章数量:1290964

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...

Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?

Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..

I have a bunch of images held on a third party server that I want to load and display as thumbnails on a webpage...

Can I use JavaScript to load each image, crop and resize them to all be the same size, then display them in a grid on the page?

Ideally, I'd like to be able to do it client side. I don't really want to pre-load and process them on the server as I do not want to increase bandwidth usage..

• javascript
• jquery
• image
• crop
• image-resizing

Share Improve this question Follow edited Jul 4, 2013 at 12:00 j0k 22.8k2828 gold badges8181 silver badges9090 bronze badges asked Oct 18, 2011 at 14:27 DazzledKidDazzledKid 39611 gold badge66 silver badges2020 bronze badges 6

• 1 if you're download a large number of images, it would probably be better to serve them as thumbnails in the first instance, to avoid slowing down the initial page load with loads of large image files. – Spudley Commented Oct 18, 2011 at 14:29
• If you just want to resize (and not crop) them, you can just force the <img> tag dimensions via CSS. – Pointy Commented Oct 18, 2011 at 14:29
• 1 Processing them on the server is more bandwidth-efficient. – Casey Chu Commented Oct 18, 2011 at 14:30
• ...and if you want to simulate a crop, then just offset it to the point you wish to display, as with CSS sprites. – Widor Commented Oct 18, 2011 at 14:30
• Do you want to crop or resize? Resizing can be done in HTML (just set the width and height of the image). – Law Metzler Commented Oct 18, 2011 at 14:31

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 7

You can put each image inside a block container with fixed dimensions and overflow: hidden, thus effectively cropping them (you can also position the image inside the container with negative top and left values to select which part of the image will be visible). All of this is standard CSS fare. The same goes for displaying the elements in a grid layout. See an example.

However, be advised that this kind of solution, although it requires almost no preparation, can be deceptively easy to follow. The user will still have to download the full, uncropped image for every cropped element you show in the page, which could turn out to be many MBs of data.

Depending on what your use case is, it might be far more preferable to adopt a server-side solution that pre-processes the images.

Maybe this is not exactly Javascript or Jquery based solution, but this script can help a lot on eCommerce websites or other types of sites where pages are full of thumbnails. It have cache mechanism, so images are processed only once: http://shiftingpixel./2008/03/03/smart-image-resizer/

JS can't directly crop/resize an image, unless you're using a <canvas> tag. At most it can fake a crop by putting the image into another element with overflow:hidden and adjusting offsets/boundaries. You can fake a resize by setting the image's height/width/zoom CSS attributes.

But if you're concerned about bandwidth, consider that a client-side resizer requires the client to load a full-sized image from your server, BEFORE it can do any kind of adjustments on it.

Javascript is a client sided language. So the images must be downloaded first before javascript can control them. If you're loading a lot of images it's best to make a server sided script that crops the images before loading them.

本文标签： jqueryIs there a way to use JavaScript to crop amp resize an image before displaying itStack Overflow