xj/yii2-jquery-eraser

yii2-jquery-eraser

yii2-jquery-eraser

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

composer.json

"require": {
    "xj/yii2-jquery-eraser": "~1.0"
},

View

Assets

xj\eraser\EraserAsset::register($this);

Css

.eraser-container {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
}
#sourceImage {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    -webkit-box-shadow: 0px 0px 20px 0px #707070;
    -moz-box-shadow: 0px 0px 20px 0px #707070;
    box-shadow: 0px 0px 20px 0px #707070;
}
#coverImage {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
}

Html

<span class="eraser-container">
    <img id="sourceImage" src="/images/eraser/source-image.jpg"/>
    <img id="coverImage" src="/images/eraser/cover-image.jpg"/>
</span>

Js

$('#coverImage').eraser({
    completeRatio: 0.4,
    completeFunction: function(){
        var progress = $('#coverImage').eraser('progress');
        if (progress.toString() !== '1') {
            $('#coverImage').eraser('clear');
        }
    }
});