使用Blue imp工具预览和保存调整大小/裁剪图像？

Question

我使用Blueimp的精彩插件JQuery File Upload上传了一些图片。

我现在希望允许我的用户调整大小（使用预览）并仅使用Blueimp插件套件裁剪并保存它们。

我知道这些插件JavaScript-Canvas-to-Blob，JavaScript-Load-Image。我想用它们来编辑服务器上的图像，如下图所示。

var $imageWrapper = $('#imageWrapper'), currentFile,
coordinates, actionsNode = $('#actions')
replaceResults = function (img) {

var content;
if (!(img.src || img instanceof HTMLCanvasElement)) {
    content = $('<span>Loading image file failed</span>');
} else {
    content = $('<a target="_blank">').append(img)
            .attr('download', currentFile.name)
            .attr('href', img.src || img.toDataURL());
}
$('#watcher').replaceWith(content);
 //console.info(content)
$imageWrapper.children().replaceWith(content);
            if (img.getContext) {
                actionsNode.show();
            }};
$('.profile-update').click(function(event) {
event.preventDefault();

var imageUrl = app.basePath + $(this).closest('.view').find('a').attr('href');

loadImage(
    imageUrl,
    function(img) {
        if (img.type === "error") {
            app.noticeBox("Error loading the selected image");
        } else {
            var $cropperWrapperClone = $('#cropperWrapper').clone(true);
            $imageWrapper = $cropperWrapperClone.find('#imageWrapper');
            $imageWrapper.html($(img).addClass('object-border'));

            app.modalBox({
                content: $cropperWrapperClone
            });

            $('#editImage', $cropperWrapperClone).on('click', function(event) {
                event.preventDefault();

                var imgNode = $imageWrapper.find('img, canvas'),
                        img = imgNode[0];
                imgNode.Jcrop({
                    setSelect: [0, 0, 250, 250],
                    onSelect: function(coords) {
                        coordinates = coords;
                    },
                    onRelease: function() {
                        coordinates = null;
                    }
                }).parent().on('click', function(event) {
                    event.preventDefault();
                });
            });

            $('#cropImage', $cropperWrapperClone).on('click', function(event) {
                event.preventDefault();

                var img = $imageWrapper.find('img, canvas')[0];
                if (img && coordinates) {
                    replaceResults(loadImage.scale(img, {
                        left: coordinates.x,
                        top: coordinates.y,
                        sourceWidth: coordinates.w,
                        sourceHeight: coordinates.h,
                        minWidth: $imageWrapper.width()
                    }));
                    coordinates = null;
                }
            });
        }
    }, {
        maxHeight: 500,
        maxWidth: 600,
        //aspectRatio: 16/9
    }
);)};

上面的代码就是我所拥有的。如何能够预览所选图像并在用户点击＆＃34;保存＆＃34;按钮？

我真的很感谢你的帮助。