图像擦除插件jQuery.eraser

所属分类:媒体-图像

 54033  367  查看评论 (30)
分享到微信朋友圈
X
图像擦除插件jQuery.eraser ie兼容9

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
});
相关插件-图像

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 31315  334

Beer Slider一款轻量级的图片对比插件

它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。
  图像
 26421  357

jQuery放大镜插件jqzoom.js

jQuery放大镜插件jqzoom.js
  图像
 100242  435

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 23885  328

讨论这个项目(30)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    右边?13?13??1o? 0
    2022/12/20 11:30:59
    completefunction 不执行啊 回复
    眸晓 . 1
    2018/1/9 10:33:01

    在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

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

    回复
    メ Syd`zero_波 1
    2017/12/15 14:29:35
    $('#yourImage').eraser( {
        completeRatio: .5,
        completeFunction: showResetButton
    });
    //if ( data.completeFunction != null ) data.completeFunction();

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

        solid121380
        2018/12/10 14:29:54
        是的是的 亲测可以 感谢
    回复
    这是一只神兽 0
    2017/9/26 9:33:50

    作者大大,为什么我在最外层加上有滚动条的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
        试了 还是没能解决,你解决了吗?
    回复
    燃烧的皇子 0
    2017/9/19 11:03:23

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

        Amundsen0
        2019/1/20 21:08:54

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

        ctx.drawImage(that, 0, 0);

        把它改成

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

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

    回复
    Laila 0
    2017/6/18 17:30:44

    Maximum call stack size exceeded

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

        请看我的最新评论

    回复
    王九蛋 1
    2016/9/27 22:09:39

    解决手机重置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;
            }
        }
    }
    回复
    伊利丹●羊驼?? 0
    2016/4/1 16:04:24
    作者大大你好,我也尝试过自己写刮刮卡一样的效果的canvas,在getImageData的这个功能,只能在服务端运行,静态页面会报错,跨域问题,请问有解决的办法吗? 回复
    *上邪!!! 0
    2016/3/11 11:03:38
    $("#redux").eraser('clear');这个方法不是将蒙版取消掉吗?  怎么不起作用呢? 回复
    Crystal流砂 0
    2015/10/17 10:10:33

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

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复