jquery橡皮擦插件使用 图片适配屏幕大小
公西宏峻
一.首先要导入橡皮擦插件，因为插件是基于jquery的是，所以要在导入插件之前导入jquery
<script src="bootstrap-3.3.6-dist/js/jquery-1.11.3.js"></script>
<script src="bootstrap-3.3.6-dist/js/jquery.eraser.js"></script>
<script src="bootstrap-3.3.6-dist/js/jquery.eraser.js"></script>
二.js代码，插件中有好几个方法，这里用到其中之一，当擦出后的比率大于40%时自动清除干净
$(function(){
$('#redux').eraser({
progressFunction: function(p){
if(Math.round(p*100) > 40){
$('#redux').eraser('clear');
}
}
});
$('#redux').eraser({
progressFunction: function(p){
if(Math.round(p*100) > 40){
$('#redux').eraser('clear');
}
}
});
});
三.界面内容
<body>
<div>
<img src="img/1.jpg" alt="" width=100%>
<img id="redux" src="img/2.jpg" alt="">
</div>
</body>
<div>
<img src="img/1.jpg" alt="" width=100%>
<img id="redux" src="img/2.jpg" alt="">
</div>
</body>
四.样式设置，使图片能适配不同的屏幕大小
* { margin: 0; padding: 0;}
#redux { position: absolute; left: 0; top: 0;}
canvas{
width:100%;
}
#redux { position: absolute; left: 0; top: 0;}
canvas{
width:100%;
}
类似资料：