jquery.eraser是一个插件，使用鼠标或触摸的动作可以擦除图像。
这个插件替换的目标图像的一个互动的帆布，可擦除使用触摸或鼠标输入。您可以指定一个回调函数完成并设置画笔大小。
看看这个：
这个插件使用图像或画布元素但你必须确保图片是完全加载之后调用eraser(),否则它不会工作。
我的结论是，下面的代码运行在Safari，Chrome OS X和Windows，Android和iOS Firefox，黑莓浏览器：
使用：
将图像或帆布变成一个可擦除画布，只是用这个语法：
$('#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
});
讨论这个项目（30）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
在reset的时候，画布可能也不能完全覆盖，或者过大，我发现可以改一处代码（大概267行）：
reset: function() {
var $this = $(this),
width = $this.width(),
height = $this.height(),
data = $this.data('eraser');
if ( data )
{
data.ctx.globalCompositeOperation = "source-over";
data.ctx.drawImage( data.source, 0, 0 ,width,height);
data.ctx.globalCompositeOperation = "destination-out";
var n = data.numParts;
while( n-- ) data.parts[n] = 1;
data.ratio = 0;
data.complete = false;
}
}
可以实现，百分百覆盖画布
$('#yourImage').eraser( {
completeRatio: .5,
completeFunction: showResetButton
});
//if ( data.completeFunction != null ) data.completeFunction();如果大家的回调函数和我一样写的是clear清除画布的话，记着把clear函数里面的这行代码删掉，否则会进入递归死循环，报错超过js的最大执行次数
-
是的是的 亲测可以 感谢
作者大大，为什么我在最外层加上有滚动条的div，可擦除的地方就只有页面加载完毕之后可以看见的部分，而且向下滚动擦除还会错位
-
我也想问
在源码中的 touchStart、touchMove、mouseDown、mouseMove这些方法函数的第一行，加上代码：
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
然后在下面的这一行
ty = event.pageY - data.posY;
改成
ty = event.pageY - data.posY + scrollY;
就可以了。
另外，在 clear 方法中，
if (data.completeFunction != null) data.completeFunction();
这行代码注释掉，因为会导致死循环继而导致内存溢出的崩溃。
在大概100行的上下，有一行代码是
ctx.drawImage(that, 0, 0);
把它改成
ctx.drawImage(that, 0, 0, width, height);
(否则在源码中会导致图片覆盖不对的问题)
-
试了 还是没能解决，你解决了吗？
在么 亲，为什么我换了两张大小一样的图片就出问题了，覆盖层的那个图片总是被放大了，不知道为什么，用你自带的图片正好
在大概100行的上下，有一行代码是
ctx.drawImage(that, 0, 0);
把它改成
ctx.drawImage(that, 0, 0, width, height);
(否则在源码中会导致图片覆盖不对的问题)
Maximum call stack size exceeded
请看我的最新评论
解决手机重置reset方法，canvas drawImage图片问题
reset: function() {
var $this = $(this),
data = $this.data('eraser');
if (data) {
var image = new Image();
image.src = "images/canvas_mask.png";
image.onload = function() {
data.ctx.globalCompositeOperation = "source-over";
data.ctx.drawImage(image, 0, 0, $this.width(), $this.height());
data.ctx.globalCompositeOperation = "destination-out";
var n = data.numParts;
while (n--) data.parts[n] = 1;
data.ratio = 0;
data.complete = false;
}
}
}
回复
-
作者大大你好，我也尝试过自己写刮刮卡一样的效果的canvas，在getImageData的这个功能，只能在服务端运行，静态页面会报错，跨域问题，请问有解决的办法吗？
回复
我用在手机上，jQuery.eraser.js做刮刮奖的页面，但是在手机上有时候会出现没有覆盖图层的问题，就是没有图擦去画布，只有下面的图片，请问这个问题要怎么解决？？？
回复- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
