一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:29:57 编辑:袖梨 来源:一聚教程网

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

热门栏目