Resize and crop images on the fly, while preserving their aspect ratio. A placeholder image is used initially; the actual image loading, cropping and resizing happens in the background. Optimized for rendering hundreds of images on the same page without blocking the browser event loop; images are loaded in batches with a pause in between each batch. This maximizes UI responsiveness while ensuring image loading is not blocking AJAX calls.
bower install jquery-resizeandcrop
Include jquery.resizeandcrop.css and jquery.resizeandcrop.js files on the page and call the plugin on any image:
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.resizeandcrop.css">
</head>
<body>
<img class="crop-me" src="placeholder.png" realsrc="imagetoloadandcrop.png" />
<script type="text/javascript" src="jquery.resizeandcrop.js"></script>
<script>
$("img.crop-me").resizeAndCrop();
</script>
</body>
</html>
In the above example, the placeholder.png image will display, while the image in the realsrc attribute of the <img>
tag gets loaded, resized, and cropped. The image will be resized to match the size of placeholder.png by default, but
you can override this by specifying the size in the <img> tag via a CSS class, in-line CSS style, or width / height
attributes:
<img src="placeholder.png" realsrc="imagetoloadandcrop.png" style="width: 200px; height: 200px;">
By default, if the original image is smaller than the placeholder, it won't get resized. You can change this by setting
forceResize to true. The full list of options are below.
Several examples of using the plugin can be found in the examples/index.html file.
The plugin sets options via a key-value object parameter:
$('img.cropme').resizeAndCrop( { center: false, imgClass: "foo" } );
Available Options:
| Name | Type | Default Value | Description |
|---|---|---|---|
| `width` | integer | Width of the placeholder image | Force the width of resized image to this value. |
| `height` | integer | Height of the placeholder image | Force the height of the resized image to this value. |
| `preserveSize` | boolean | `false` | If the original image is smaller than the placeholder, preserve the space occupied by the placeholder and make the image float in its left-top corner. |
| `forceResize` | boolean | `false` | If the original image is smaller than the placeholder, enlarge it to fit the placeholder (it can make it blurry). |
| `crop` | boolean | `true` | When `false`, only resize the image (if needed), do not crop it. That means the image might get distorted if the aspect ratio of the original image is different from the aspect ratio of the placeholder. It also allows for using this plugin as a simple image loader (deferred loading). |
| `center` | boolean | `true` | When `true`, the cropped portion of the image is centered. If you set it to `false`, the cropped portion is always the top-left part of the image. |
| `smart` | boolean | `true` | Only applicable when `center` is set to `true` (default). The vertical centering is optimized for people's portraits. If the height/width ratio is bigger than 1.2, the vertical centering is disabled and the centering only applies horizontally. This option is intended to be used when you expect photos that could be medium closeups or full shot portrait (head, body and feet) because the head is usually in the top part of the picture and vertically centering does not work well. |
| `imgClass` | string | Optional class to add to the ` |
|
| `contClass` | string | Optional class to add to the ` ` element that acts as a container for the ` |
|
| `renderStartDelay` | integer | 50 | Time in milliseconds to delay before loading/rendering images. Set to zero to immediately load/render images. |
| `renderBatchSize` | integer | 10 | Number of images to load at once. The event loop is freed up after each batch to maximize UI responsiveness. |
| `renderBatchPause` | integer | 200 | Time in milliseconds to pause before processing the next batch of images. It is important to have big enough pause when you load large sets of images, otherwise the UI may become very unresponsive. |
Copyright (c) 2013 Traackr Licensed under the MIT license.