Cropbox Based on jQuery Avatar cropping plug-in and jquery cropping cropbox

Cropbox Based on jQuery Avatar cropping plug-in and jquery cropping cropbox

Today we will share with you a jQuery-based Avatar cropping plug-in cropbox, which is a simple and practical jQuery online cropping plug-in. This plug-in is applicable to Internet Explorer 8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world. As follows:

Download Online Preview source code

Implementation code.

Html code:

  <div class="container">        <div class="imageBox">            <div class="thumbBox">            </div>            <div class="spinner" style="display: none">                Loading...</div>        </div>        <div class="action">            <input type="file" id="file" style="float: left; width: 250px">            <input type="button" id="btnCrop" value="Crop" style="float: right">            <input type="button" id="btnZoomIn" value="+" style="float: right">            <input type="button" id="btnZoomOut" value="-" style="float: right">        </div>        <div class="cropped">        </div>    </div>

Css code:

   .container        {            position: absolute;            top: 5%;            left: 36%;            right: 0;            bottom: 0;        }        .action        {            width: 400px;            height: 30px;            margin: 10px 0;        }        .cropped > img        {            margin-right: 10px;        }

Javascript code:

$(window).load(function () {            var options =        {            thumbBox: '.thumbBox',            spinner: '.spinner',            imgSrc: 'images/avatar.png'        }            var cropper = $('.imageBox').cropbox(options);            $('#file').on('change', function () {                var reader = new FileReader();                reader.onload = function (e) {                    options.imgSrc = e.target.result;                    cropper = $('.imageBox').cropbox(options);                }                reader.readAsDataURL(this.files[0]);                this.files = [];            })            $('#btnCrop').on('click', function () {                var img = cropper.getDataURL();                $('.cropped').append('');            })            $('#btnZoomIn').on('click', function () {                cropper.zoomIn();            })            $('#btnZoomOut').on('click', function () {                cropper.zoomOut();            })        });

Via: http://www.w2bc.com/Article/26838