cropbox - JScomplete

gistfile1.js

$('.bg-public').on('click', editBackground);

function initializeCropper(options){
    var cropper = $(options.imageBox).cropbox(options);
    var originalImgSrc = options.imgSrc;
    $(options.fileInput).on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $(options.imageBox).cropbox(options);
        }
        reader.readAsDataURL(this.files[0]);
        this.files = [];
    })
    $(options.btnCrop).on('click', function(){
        var blob = cropper.getDataURL();
        blob = blob.split(',')[1];  //this is a base64-encoded string
        //execute your upload function here
    });
    $(options.btnZoomIn).on('click', function(){
        cropper.zoomIn();
    })
    $(options.btnZoomOut).on('click', function(){
        cropper.zoomOut();
    });
    $(options.btnCancel).on('click', function(){
        if(options.cancelFunction) options.cancelFunction();
    });
}

function editBackground(){
    //removes the bg-public div element
    $('.bg-public').addClass('hidden');
    
    //initialize the crop tool
    initializeCropper({
        imageBox: '.imageBox-bg',
        thumbBox: '.imageBox-bg',
        imgSrc: 'http://i.imgur.com/Dbqggm5.jpg',
        fileInput: '#bg-file',
        btnCrop: '#bg-btnCrop',
        btnZoomIn: '#bg-btnZoomIn',
        btnZoomOut: '#bg-btnZoomOut',
        btnCancel: '#bg-btnCancel',
        cancelFunction: function cancelFunction(){
            //execute your cancel delegate here
        },
        cropSuccessDelegate: function cropSuccessDelegate(){
            //execute your success delegate here
        }
    });
    
    //removes the hidden class from the crop html div element
    $('.canopy-bg-edit').removeClass('hidden');
}