Place Imaging on a page

1. Include <!DOCTYPE html> directive at the beginging of the HTML page and include the following scripts:

  <script src="http://izhuk.com/imaging/service/"></script> <!-- Contains Imaging code -->
  <script src="resources.js"></script>   <!-- Contains text messages and icons -->

2. Create the an HTML5 canvas element, for example:

    <canvas id="imaging" width="900" height="600" style="border:1px solid black;outline:none"></canvas>

3. Create Imaging object passing to it the canvas element and parameters:

    var params = {
	resources : RESOURCES // resource text messages (defined in resources.js)
    };

    var imaging = new Imaging( document.getElementById('imaging'), params );

Load an save the image

To load an image call the method loadImage(image) where image is url of the image.
To save the processed image call the method getImageData(options).

Your javascript code that saves the image can be triggered either by your button on the page or called by Imaging 'save' button. To use Imaging 'save' button pass your saving function to Imaging constuctor as param field. If you don't use Imaging 'save' button you can hide it removing from the list of visible_buttons in resources.js.

Customize UI

To customize UI you can use:

 

Methods reference

Imaging(canvas,params)

Constructs Imaging object.
Parameters:
canvas - HTML5 <canvas> element to display Imaging GUI.
params - The following parameters are supported:
resources - An object specifying text messages (see resources.js).
proportion - Restricts proportion of the crop selector (specified as width,height)
save - function to call when save button is pressed.

Notes:

loadImage(url)

Loads an image.
Parameters:
url - URL of the iamge to load.

getImageData(options)

Returns data of the processed image. The data is in dataURL format: data:image/png;base64,<...data...>
for example: 
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAA
AHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
Then you can send the obtained string to the server using a hidden field in an HTML form or using AJAX.
Your server-side script will have to decode the data and convert it to binary image file (if necessary) or save it on the server as is.
Parameters:
options - object having the following optional fields:
  format - image format specified as mime type, e.g. image/jpeg. The default is image/png
  width - output image width
  height - output image height
width and height can be used to obtain the image thumbnail. Current image size can be obtained via getImageSize().

getImageSize()

Returns current image size as { width: , height: }. Size is specified in terms of the original image.
This method is convenient if you have specific image size requirement which can be checked before saving the image.

getSelector()

Returns current selector as { x: , y: , width: , height: , shape: , feather: } or null if there is no selection.
The coordinates and size are specified in terms of the original image; feather is in the range 0..100; shape is one of the following strings: 'rectangle', 'ellipse'.

isChanged()

Returns true if any processing action has been done.

doAction(action)

Allows doing actions simalar to control panel buttons, for example 'crop' the image if selector is displayed before save
Parameters:
action - action name. For the list of actions see resources.js visible_buttons

setStyle(style)

Sets Imaging style options.
Parameters:
style - style options.
Example:
imaging.setStyle({
  background : '#CDCDCD',
  image_border : 1,
  image_border_color : '#888888',
  handle_width : 12, // width of the scrollbar handle
  handle_padding : 4, // scrollbar handle padding
  handle_color : 'rgba(0,0,0,0.1)', // color of the scrollbar handle
  handle_color_over : 'rgba(0,0,0,0.35)',
  status : 'none' // hides the status line
});