How to display ImageMARK

To display ImageMARK on a page:
  1. Create an HTML5 <canvas> element;
  2. Include the component's javascript
  3. Create an instance of ImageMARK object passing to its constructor your canvas element and cofiguration;
  4. Load the image to be commented;
Example: 
    <canvas id="mycanvas" width="800" height="600"></canvas>
    <script src="http://izhuk.com/mark/2/"></script>
    <script>
	var imagemark = new ImageMARK(document.getElementById('mycanvas'),config);
	imagemark.loadBackgroundImage('myimage.jpg');
    </script>

Optionally you can display cliparts that users can insert in their comments, for example

    imagemark.setCliparts( ['dir/img1.gif', 'dir/img2.gif' 'dir/img3.gif', 'dir/img4.gif'], 4, 1);

Save/Retrieve the comments

To save the user's comments (annotation) call getAnnotation(). This method returns data as a string which you can save on the server and load later for editing. To display an annotation saved before call method setAnnotation(annotation)

If you want to save the annotation in a raster image (e.g. PNG or JPEG) use method exportImage() which returns the image in Data URL format. But remember that raster images can't be edited in ImageMARK, you can only draw comments on top of them.

Methods

ImageMARK(canvas,config) Creates an instance of ImageMARK.
canvas - canvas element to display ImagaMARK
config - configuration parameters
loadBackgroundImage(url) Loads the image to be commented.
url - image's url
setSolidBackground(width,height,color) Specifies to use solid background instead of image. Can be used to draw without the background image.
width - background width
height - background height
color - background color specified as #RRGGBB string
setCliparts(urls,rows,cols) Sets cliparts for insertion in the annotation
urls - array of urls of clipart images
rows - number of rows to arrange the cliparts
cols - number of columns to arrange the cliparts
getAnnotation() Returns annotation data (as a string) which can be saved and loaded later.
setAnnotation(data) Sets the annotation data obtained earlier from getAnnotation()
data - annotation data
loadAnnotation(url) Loads annotation data from the server
url - URL of the annotation data
exportImage(options) Returns the annotation as a raster image.
The image is returned in Data URL format, for example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAA...
The parameter options is an object where the following fields are recognized:
format - image format specified as mime type, e.g. 'image/png', 'image/jpeg';
 note: supported formats depend on the browser (the default is 'image/png').
background - specifies whether to render the background image or not (the default is true).
noprefix - if true the Data URL prefix data:image/*;base64, is cut (the default is false).
isEmpty() Returns true if current annotation is empty.
isChanged() Returns true if the annotation has been changed by the user.

Configuration

Configuration is an object that allows customizing ImageMark GUI, for example:

An example of configuration file is included in the package.