jQuery plugin to resize and crop images while preserving aspect ratio. Can also be used for lazy image loading and improving UI responsiveness when displaying lots of images.
Switch branches/tags
Nothing to show
Clone or download
Michael Pelletier
Latest commit 93753cd Apr 14, 2018

README.md

jQuery Resize and Crop Plugin

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.

Installation Via bower

bower install jquery-resizeandcrop

Usage

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.

Options

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 `` element showing the resized and cropped image.
`contClass` string Optional class to add to the `
` element that acts as a container for the `` element showing the resized and cropped image.
`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.

License

Copyright (c) 2013 Traackr Licensed under the MIT license.