jQuery.eraser - Makes an image erasable

jQuery.eraser is a jQuery plugin that makes an image erasable (with mouse or touch movements)

This plugin replaces the targeted image by an interactive canvas that can be erased using touch or mouse inputs. You can specify a callback for completion and set the brush size.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE JS FILES

<script src='js/jquery-1.6.2.min.js' type='text/javascript'></script>
<script src='js/jquery.eraser.js' type='text/javascript'></script>

2. HTML

<img id="robot" src="img/robot.jpg" />

3. JAVASCRIPT

addEventListener( "load", init, false );
			
function init( event ) {
	$("#robot").eraser();
}

4. EXAMPLES

To specify a brush size, add some options (default value is 40) :

$('#yourImage').eraser( { size: 30 } );
// and you can also change the size later :
// $('#yourImage').eraser( "size", 30 } );

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

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

And you can erase all the canvas' content by calling :

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

To get a callback when 50% of the image has been erased, use this :

$('#yourImage').eraser( {
    completeRatio: .5,
    completeFunction: showResetButton
});