HotZone

Versatile plain-js for selecting area of an image. Can be used to retreive selection coordinates, or content.

Features

• Looks and feels great :)
• Plain JavaScript with autodetection to install itself as as jQuery plugin.
• Ability to modify selected area by moving it or by single direction resize.
• Set selection programatically.
• Supports various visual changes via simple configuration parameters.
• Pure canvas solution, just one wrapper
  and a single element.

Live demo

http://rawgit.com/intellexApps/js-HotZone/master/example/index.html

Usage

Plain javascript:

var hotzone = new HotZone(params).useOnImage(document.getElementById('Example'));
hotzone.getSelection(); // Get coordinates
hotzone.getImage(); // Get content

hotzone.setSelection(new HotZone.Rect(50, 50, 100, 100)); // Set selection (args: left, right, width, height)

jQuery

$('#Example').HotZone(params);
$('#Example').data('HotZone').getSelection(); // Get coordinates
$('#Example').data('HotZone').getImage(); // Get coordinates

$('#Crop').setSelection(new HotZone.Rect(50, 50, 100, 100)); // Set selection (args: left, right, width, height)

Configuration options

Initialization params

• lineWidth: 3, // The width of the line around the selection, in pixels.
• lineGrabZone: 40, // The distance around the selected area, where resize options will appear.
• lineColor: '#CFFF', // The color of the line arund the selection, supports alpha channel.
• overlayColor: '#D334', // The overlay color of the unselected area, supports alpha channel.
• selectedColor: null, // The overlay color of the selected area, supports alpha channel.

Arguments for getImage(format, encoderOptions) method

• format // A mimetype indicating the image format. The default is image/png.
• encoderOptions // A number between 0 and 1 indicating image quality for image/jpeg or image/webIf. Default is 0.92.

TODO

1. Optimize!
2. Blur effect.
3. Tests.
4. Events.
5. Better documentation.

Credits

Script has been written by the Intellex team, for novinarnica.net backend system.