js刮一刮/橡皮擦 插件jquery.eraser.js使用方法

引入jquery和jquery.eraser.js 

https://github.com/boblemarin/jQuery.eraser

 

JS部分：

$(window).load(function  () { //这个适用手机端，等图片加载完再显示，因为有可能会出现第一次加载图片没有加载完就不会出现canvas
        $('#redux').eraser( {
            size: 50,   //设置橡皮擦大小
            completeRatio: .6, //设置擦除面积比例
            completeFunction: showResetButton   //大于擦除面积比例触发函数
        });
        function showResetButton(){
            $(".main_box .show,.main_box .mask").fadeIn(300);
            $(".show").css("display","flex");
        }
        $(".main_box .mask,.main_box .show .close,.main_box .show .btn,.show").click(function(){
            // $(".main_box .show,.main_box .mask").fadeOut(300);
            // $(".show").css("display","none");
            window.location.reload();
        })
    })

 

HTML部分

<img id="redux" src="images/mask-img.png" />

 

/*

* jQuery.eraser v0.4.2

* makes any image or canvas erasable by the user, using touch or mouse input

* https://github.com/boblemarin/jQuery.eraser

*

* Usage:

*

* $('#myImage').eraser(); // simple way

*

* $(#canvas').eraser( {

*   size: 20, // define brush size (default value is 40)

*   completeRatio: .65, // allows to call function when a erased ratio is reached (between 0 and 1, default is .7 )

*   completeFunction: myFunction // callback function when complete ratio is reached

* } );

*

* $('#image').eraser( 'clear' ); // erases all canvas content

*

* $('#image').eraser( 'reset' ); // revert back to original content

*

* $('#image').eraser( 'size', 80 ); // change the eraser size

*

*

* https://github.com/boblemarin/jQuery.eraser

* http://minimal.be/lab/jQuery.eraser/

*

* Copyright (c) 2010 boblemarin emeric@minimal.be http://www.minimal.be

*

* Permission is hereby granted, free of charge, to any person

* obtaining a copy of this software and associated documentation

* files (the "Software"), to deal in the Software without

* restriction, including without limitation the rights to use,

* copy, modify, merge, publish, distribute, sublicense, and/or sell

* copies of the Software, and to permit persons to whom the

* Software is furnished to do so, subject to the following

* conditions:

*

* The above copyright notice and this permission notice shall be

* included in all copies or substantial portions of the Software.

*

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES

* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND

* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT

* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR

* OTHER DEALINGS IN THE SOFTWARE.

*/

(function( $ ){

    var methods = {

        init : function( options ) {

            return this.each(function(){

                var $this = $(this),

                    data = $this.data('eraser');

                if ( !data ) {

                    var width = $this.width(),

                        height = $this.height(),

                        pos = $this.offset(),

                        $canvas = $("<canvas/>"),

                        canvas = $canvas.get(0),

                        size = ( options && options.size )?options.size:40,

                        completeRatio = ( options && options.completeRatio )?options.completeRatio:.7,

                        completeFunction = ( options && options.completeFunction )?options.completeFunction:null,

                        parts = [],

                        colParts = Math.floor( width / size ),

                        numParts = colParts * Math.floor( height / size ),

                        n = numParts,

                        ctx = canvas.getContext("2d");

                    // replace target with canvas

                    $this.after( $canvas );

                    canvas.id = this.id;

                    canvas.className = this.className;

                    canvas.width = width;

                    canvas.height = height;

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

                    $this.remove();

                    // prepare context for drawing operations

                    ctx.globalCompositeOperation = "destination-out";

                    ctx.strokeStyle = 'rgba(255,0,0,255)';

                    ctx.lineWidth = size;

                    ctx.lineCap = "round";

                    // bind events

                    $canvas.bind('mousedown.eraser', methods.mouseDown);

                    $canvas.bind('touchstart.eraser', methods.touchStart);

                    $canvas.bind('touchmove.eraser', methods.touchMove);

                    $canvas.bind('touchend.eraser', methods.touchEnd);

                    // reset parts

                    while( n-- ) parts.push(1);

                    // store values

                    data = {

                        posX:pos.left,

                        posY:pos.top,

                        touchDown: false,

                        touchID:-999,

                        touchX: 0,

                        touchY: 0,

                        ptouchX: 0,

                        ptouchY: 0,

                        canvas: $canvas,

                        ctx: ctx,

                        w:width,

                        h:height,

                        source: this,

                        size: size,

                        parts: parts,

                        colParts: colParts,

                        numParts: numParts,

                        ratio: 0,

                        complete: false,

                        completeRatio: completeRatio,

                        completeFunction: completeFunction

                    };

                    $canvas.data('eraser', data);

                    // listen for resize event to update offset values

                    $(window).resize( function() {

                        var pos = $canvas.offset();

                        data.posX = pos.left;

                        data.posY = pos.top;

                    });

                }

            });

        },

        touchStart: function( event ) {

            var $this = $(this),

                data = $this.data('eraser');

            if ( !data.touchDown ) {

                var t = event.originalEvent.changedTouches[0],

                    tx = t.pageX - data.posX,

                    ty = t.pageY - data.posY;

                methods.evaluatePoint( data, tx, ty );

                data.touchDown = true;

                data.touchID = t.identifier;

                data.touchX = tx;

                data.touchY = ty;

                event.preventDefault();

            }

        },

        touchMove: function( event ) {

            var $this = $(this),

                data = $this.data('eraser');

            if ( data.touchDown ) {

                var ta = event.originalEvent.changedTouches,

                    n = ta.length;

                while( n-- )

                    if ( ta[n].identifier == data.touchID ) {

                        var tx = ta[n].pageX - data.posX,

                            ty = ta[n].pageY - data.posY;

                        methods.evaluatePoint( data, tx, ty );

                        data.ctx.beginPath();

                        data.ctx.moveTo( data.touchX, data.touchY );

                        data.touchX = tx;

                        data.touchY = ty;

                        data.ctx.lineTo( data.touchX, data.touchY );

                        data.ctx.stroke();

                        event.preventDefault();

                        break;

                    }

            }

        },

        touchEnd: function( event ) {

            var $this = $(this),

                data = $this.data('eraser');

            if ( data.touchDown ) {

                var ta = event.originalEvent.changedTouches,

                    n = ta.length;

                while( n-- )

                    if ( ta[n].identifier == data.touchID ) {

                        data.touchDown = false;

                        event.preventDefault();

                        break;

                    }

            }

        },

        evaluatePoint: function( data, tx, ty ) {

            var p = Math.floor(tx/data.size) + Math.floor( ty / data.size ) * data.colParts;

            if ( p >= 0 && p < data.numParts ) {

                data.ratio += data.parts[p];

                data.parts[p] = 0;

                if ( !data.complete) {

                    if ( data.ratio/data.numParts >= data.completeRatio ) {

                        data.complete = true;

                        if ( data.completeFunction != null ) data.completeFunction();

                    }

                }

            }

        },

        mouseDown: function( event ) {

            var $this = $(this),

                data = $this.data('eraser'),

                tx = event.pageX - data.posX,

                ty = event.pageY - data.posY;

            methods.evaluatePoint( data, tx, ty );

            data.touchDown = true;

            data.touchX = tx;

            data.touchY = ty;

            data.ctx.beginPath();

            data.ctx.moveTo( data.touchX-1, data.touchY );

            data.ctx.lineTo( data.touchX, data.touchY );

            data.ctx.stroke();

            $this.bind('mousemove.eraser', methods.mouseMove);

            $(document).bind('mouseup.eraser', data, methods.mouseUp);

            event.preventDefault();

        },

        mouseMove: function( event ) {

            var $this = $(this),

                data = $this.data('eraser'),

                tx = event.pageX - data.posX,

                ty = event.pageY - data.posY;

            methods.evaluatePoint( data, tx, ty );

            data.ctx.beginPath();

            data.ctx.moveTo( data.touchX, data.touchY );

            data.touchX = tx;

            data.touchY = ty;

            data.ctx.lineTo( data.touchX, data.touchY );

            data.ctx.stroke();

            event.preventDefault();

        },

        mouseUp: function( event ) {

            var data = event.data,

                $this = data.canvas;

            data.touchDown = false;

            $this.unbind('mousemove.eraser');

            $(document).unbind('mouseup.eraser');

            event.preventDefault();

        },

        clear: function() {

            var $this = $(this),

                data = $this.data('eraser');

            if ( data )

            {

                data.ctx.clearRect( 0, 0, data.w, data.h );

                var n = data.numParts;

                while( n-- ) data.parts[n] = 0;

                data.ratio = data.numParts;

                data.complete = true;

                if ( data.completeFunction != null ) data.completeFunction();

            }

        },

        size: function(value) {

            var $this = $(this),

                data = $this.data('eraser');

            if ( data && value )

            {

                data.size = value;

                data.ctx.lineWidth = value;

            }

        },

        reset: function() {

            var $this = $(this),

                data = $this.data('eraser');

            if ( data )

            {

                data.ctx.globalCompositeOperation = "source-over";

                data.ctx.drawImage( data.source, 0, 0 );

                data.ctx.globalCompositeOperation = "destination-out";

                var n = data.numParts;

                while( n-- ) data.parts[n] = 1;

                data.ratio = 0;

                data.complete = false;

            }

        }

    };

    $.fn.eraser = function( method ) {

        if ( methods[method] ) {

            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));

        } else if ( typeof method === 'object' || ! method ) {

            return methods.init.apply( this, arguments );

        } else {

            $.error( 'Method ' +  method + ' does not yet exist on jQuery.eraser' );

        }

    };

})( jQuery );