Image Cropping - using Cropper, the perfectly configurable, opensource plugin
Summary of features
The COLOURcode template integrates Cropper, a very easy to use jQuery image cropping plugin, with live previews and support for locked aspect ratios and grids. Cropper's responsiveness is further enhanced by some extra styling touches built into the template, and is so flexible that it rivals commercial alternatives.
At a glance
- Cropper supports a whopping 39 options, 27 methods and 7 events.
- It supports touch (mobile), zooming, rotating and scaling (flipping).
- Supports browser-side cropping and translates exif orientation data.
Cropper, basic (aspectRatio: 16/9)
Coordinates: X:0Y:0Width:0Height:0
This template automatically configures Cropper as fully responsive, meaning that both the main image and its container scale up or down in both height and width according to the viewport size. Markup: div.crop-container > div.crop-img > img
Cropper with preview, free ratio (aspectRatio: NaN)
Coordinates: X:0Y:0Width:0Height:0
Cropper, no autocrop (autoCrop: false, aspectRatio: 16/9)
Coordinates: X:0Y:0Width:0Height:0
Cropper with preview (aspectRatio: 1, guides: false)
Coordinates: X:0Y:0Width:0Height:0
At normal sizes the preview can be repositioned from the default top-right by simply adding any of three classes e.g. .crop-preview.crop-preview-bottom-left. The preview is responsive in that it is statically positioned for smartphones.