Skip to content

jQuery plugin that makes an image erasable (with mouse or touch movements)

Notifications You must be signed in to change notification settings

fanazhe/jQuery.eraser

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#jQuery.eraser v0.5.1

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.

Please note that I don't claim that the completion detection process is ultimately accurate. In fact you should rather use a completeRatio around 0.8 if you want a near-complete erase process.

#What's new in 0.5.1

Added a 'progress' method (see details in the Usage section)

###What was new in 0.5.0

Eraser now takes care of checking if the target image is already loaded. If not, it registers a callback on the load event and waits for the bitmap data to be available.

You don't have to worry anymore about anything but erasing.

#Usage :

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

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

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 the following options :

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

If you 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 you can provide a function that will be called each time the user erases a new 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) + '%');
	}
});

#URLs :

* https://github.com/boblemarin/jQuery.eraser
* http://minimal.be/lab/jQuery.eraser/

Created by @boblemarin

About

jQuery plugin that makes an image erasable (with mouse or touch movements)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%