Jquery.eraser Picture Mask Mask Erase plugin usage

Jquery.eraser is a plugin that uses mouse or touch actions to erase images, this plugin replaces the target image with an interactive canvas that can be erased using touch or mouse input. You can specify a callback function to complete and set the brush size.

This effect is a little bit iOS above the eraser application, this plugin uses the image or canvas element but you have to make sure that the picture is loaded after full load call eraser (), otherwise it won't work, and I conclude that the following code runs in Safari,chrome OS x and Windows, Android and iOS Firefox, BlackBerry and other browsers.

How to use

To turn an image or canvas into a erasable canvas, just use this syntax:

$ (' #yourImage '). Eraser ();

Specify a brush size and add some options (the default is 40):

$ (' #yourImage '). Eraser ({size:30});
You can also change the size after:
$ (' #yourImage '). Eraser ("Size", 30});

You can reset the canvas (back to the original image) with this code:

$ (' #yourImage '). Eraser (' reset ');

You can call the contents of the Erase canvas:

$ (' #yourImage '). Eraser (' clear ');

To get a callback when image 50% has been removed, use this:

$ (' #yourImage '). Eraser ({
Completeratio:. 5,
Completefunction:showresetbutton
});

If you are need to manually query the progress of the user, use the progress method:

var progress = $ (' #yourImage '). Eraser (' progress '); Returns a value between 0 and 1
There is also a progressfunction option where can we provide a function that'll be called each time the user erases a n EW area. It receives as argument the normalized progress value (0.0 to 1.0).

$ (' #yourImage '). Eraser ({
Progressfunction:function (p) {
Console.log (Math.Round (p * 100) + '% ');
}
});