jQuery.eraser图片蒙板遮罩擦除插件使用详解

jquery.eraser是一个插件，使用鼠标或触摸的动作可以擦除图像，这个插件替换的目标图像的一个互动的帆布，可擦除使用触摸或鼠标输入。您可以指定一个回调函数完成并设置画笔大小。

这个效果有点IOS上面的擦图应用，这个插件使用图像或Canvas元素但你必须确保图片是完全加载之后调用eraser(),否则它不会工作，我的结论是，下面的代码运行在Safari，Chrome OS X和Windows，Android和iOS Firefox，黑莓等浏览器上。

使用方法

将图像或Canvas变成一个可擦除画布，只是用这个语法：

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

指定一个画笔大小,添加一些选项(默认值为40):

$('#yourImage').eraser( { size: 30 } );
// 你也可以改变大小后:
// $('#yourImage').eraser( "size", 30 } );

您可以重置帆布（回原始图像）与此代码：

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

你都可以调用erase画布的内容：

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

得到一个回调时的图像50%已被删除，使用这：

$('#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) + '%');
    }
});