jQuery.eraser 图像蒙版擦除插件

Question

jQuery.eraser 是一个基于 jQuery 的插件，它的效果类似于橡皮擦，按住鼠标不放，在图片上面来回移动，上面灰色的图片就会被擦出，显示出下面彩色的图片。

jQuery.eraser 的原理其实是有灰色、彩色两张图片（都需要自己事前准备），将灰色的图片装载于一个 canvas 中，然后和彩色的图片用 CSS 定位在同一个位置，并设置 z-index 使 canvas 位于彩色图片之上。当按住鼠标并在 canvas 上来回移动时，就出现了类似橡皮擦擦出的效果。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.eraser.js"></script>

2、HTML

<div class="wenjiangs">
  <img src="images/1.jpg" alt="">
  <img id="redux" src="images/2.jpg" alt="">
</div>

3、CSS

* {
  margin: 0;
  padding: 0;
}
.wenjiangs {
  position: relative;
  width: 700px;
  height: 438px;
  margin: 0 auto;
}
.wenjiangs img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
#redux {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

4、JavaScript

$(function(){
  $('#redux').eraser();
});

配置

属性/方法	类型	默认值	说明
size	整数	40	橡皮擦大小
completeRatio	浮点数	0.7	擦出比率
completeFunction	函数	null	配合 completeRatio 使用，达到擦出比率后的函数
progressFunction	函数	null	擦出后的回调函数，他接收一个参数，为擦出后的比率（0.0 – 1.0）
reset			重置，即还原成未擦出的状态，如：$(‘#yourImage’).eraser(‘reset’);
clear			清除，如：$(‘#yourImage’).eraser(‘clear’);

相关链接

• https://plugins.jquery.com/eraser/
• https://github.com/boblemarin/jQuery.eraser
• http://minimal.be/lab/jQuery.eraser/