Skip to content

Latest commit

 

History

History
59 lines (45 loc) · 2.16 KB

README.md

File metadata and controls

59 lines (45 loc) · 2.16 KB

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.