最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery.eraser图片蒙板遮罩擦除插件使用详解
时间:2016-04-16 编辑:简简单单 来源:一聚教程网
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) + '%');
}
});
相关文章
- 用jQuery实现圆点图片轮播效果 07-07
- jQuery实现图片滑动效果 06-08
- jQuery图片拖动组件Dropzone用法示例 01-24
- jquery图片列表鼠标移入微动实现代码 12-02
- 基于jquery商城图片放大镜特效代码 04-12
- jQuery实现图片标注效果的例子 03-20