首先我们在页面上放置上传图片按钮、按钮，及裁剪后图片的位置。

<input type="file" id="file" style="width: 250px" />
<div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none">Loading...</div>
</div>
<div class="action">
    <input type="button" id="btnCrop" value="裁剪" />
    <input type="button" id="btnZoomIn" value="放大" />
    <input type="button" id="btnZoomOut" value="缩小" />
</div>
<div class="cropped"></div>

接着我们引入jQuery和裁剪插件cropbox：

<script type="text/javascript" src="jquery.js"></script> <script src="cropbox-min.js" type="text/javascript"></script>

jQuery

最后我们调用cropbox插件：

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