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();
            })
        });