LOFTER-网易轻博

html:

<div class="container">

                        <div class="imageBox" style="float:left;">

                            <div class="thumbBox"></div>

                            <div class="spinner" style="display: none">Loading...</div>

                        </div>

                        <div class="cropped" style="float:left;"></div>

                        <div style="width:100%;float:left;">

                            <form action="https://192.168.1.226/user/updateHeadPortrait" method="post" id="UserLoginFrom"  target="uploadIframe" onsubmit="" enctype="multipart/form-data">

                                <div class="new-contentarea tc">

                                    <a href="javascript:void(0)" class="upload-img">

                                        <label for="upload-file">上传图像</label>

                                    </a>

                                    <input type="file" class="" name="headPortrait" id="upload-file" />

                                </div>

                                <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">

                                <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">

                                <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">

                                <input class="button blue" type="submit" value="保存头像">

                            </form>

                        </div>

                    </div>

<iframe id="uploadIframe" name="uploadIframe" class="hide"></iframe>

<script src="../js/cropbox/cropbox.js" ></script>

+++++++++++++++++++++++++++++

js部分：

$(function() {

        var options =

            {

                thumbBox: '.thumbBox',

                spinner: '.spinner',

                imgSrc: ''

            }

        var cropper = $('.imageBox').cropbox(options);

        $('#upload-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').html('');

            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');

            $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');

            //$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');

        })

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

            cropper.zoomIn();

        })

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

            cropper.zoomOut();

        })

    });