基于jQuery头像裁剪插件cropbox

今天给大家分享一款基于jQuery头像裁剪插件cropbox，这是一款简单实用的jQuery头像在线裁剪插件。该插件适用于适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

  <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代码：

   .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代码：

$(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('<img src="' + img + '">');

            })

            $('#btnZoomIn').on('click', function () {

                cropper.zoomIn();

            })

            $('#btnZoomOut').on('click', function () {

                cropper.zoomOut();

            })

        });

via：http://www.w2bc.com/Article/26838