A custom property editor for Umbraco that allows the editor to select multiple cropping areas with different zooms for an image.
You can install the selected release through the Umbraco package installer or download and install locally from Our.
After installing the package, create a new DataType and select "Zoom Area Cropper" from the property editor dropdown. Set the width and height you want your crops to output to in the DataType, and then add it to a DocType of your choice.
Once installed, in the editor for a page with the cropper you can select an image, and then add one or more crop points for it. Each crop point has its focus determined by the focus handle, has a name you can change, and then has a zoom level that you can adjust independent of other crops after selecting "preview crop". (See gif above for example of what this looks like).
Here's a simple example of making use of Zoom Area Cropper in your view.
Note: When using super large images in the cropper, you may need to wait several seconds after adjusting a crop's position or zoom level in order to see the changed image in the crop's preview, due to ImageProcessor taking longer to handle modifying such large images. More typical sized media are more speedy with the previews.
If you have questions, feel free to ask them here.
Want to contribute to the Zoom Area Cropper package? You'll want to use Grunt (our task runner) to help you integrate with a local copy of Umbraco.
Requires Node.js to be installed and in your system path
npm install -g grunt-cli && npm install -g grunt
npm install
grunt
Builds the project to /dist/. These files can be dropped into an Umbraco 7 site, or you can build directly to a site using:
grunt --target="D:\inetpub\mysite"
You can also watch for changes using:
grunt watch
grunt watch --target="D:\inetpub\mysite"
If you want to build the package file (into a pkg folder), use:
grunt umbraco