评论：图像擦除插件jQuery.eraser  [查看原文]

在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;
	}
}

眸晓 . 0
2018/1/9 10:33:44

可以实现，百分百覆盖画布

$('#yourImage').eraser( {
    completeRatio: .5,
    completeFunction: showResetButton
});
//if ( data.completeFunction != null ) data.completeFunction();

如果大家的回调函数和我一样写的是clear清除画布的话，记着把clear函数里面的这行代码删掉，否则会进入递归死循环，报错超过js的最大执行次数

solid121380
2018/12/10 14:29:54
是的是的 亲测可以 感谢

作者大大，为什么我在最外层加上有滚动条的div，可擦除的地方就只有页面加载完毕之后可以看见的部分，而且向下滚动擦除还会错位

????0
2018/9/25 17:19:50
我也想问

Amundsen3
2019/1/20 21:04:09

在源码中的 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();

这行代码注释掉，因为会导致死循环继而导致内存溢出的崩溃。

Amundsen1
2019/1/20 21:06:41

在大概100行的上下，有一行代码是  

ctx.drawImage(that, 0, 0);

把它改成  

ctx.drawImage(that, 0, 0, width, height);

(否则在源码中会导致图片覆盖不对的问题)

W M0
2021/10/28 14:46:37
试了 还是没能解决，你解决了吗？

在么 亲，为什么我换了两张大小一样的图片就出问题了，覆盖层的那个图片总是被放大了，不知道为什么，用你自带的图片正好

Amundsen0
2019/1/20 21:08:54

在大概100行的上下，有一行代码是

ctx.drawImage(that, 0, 0);

把它改成

 ctx.drawImage(that, 0, 0, width, height);

(否则在源码中会导致图片覆盖不对的问题)

Maximum call stack size exceeded

メ Syd`zero_波0
2017/12/15 13:54:47

请看我的最新评论

解决手机重置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;
        }
    }
}

我用在手机上，jQuery.eraser.js做刮刮奖的页面，但是在手机上有时候会出现没有覆盖图层的问题，就是没有图擦去画布，只有下面的图片，请问这个问题要怎么解决？？？

请问这个怎么跟zepto.min.js和zepto.fullpage.js结合使用？