上传图像文件，在jquery模态对话框中加载裁剪并保存裁剪后的图像.NET MVC, c#， JQuery

Question

我正在开发一个应用程序，用户可以上传他的头像/个人资料照片。我想允许用户通过在jquery对话框上上传图像来裁剪图像。裁剪后，用户可以保存裁剪后的图像。我用的是ASP。NET MVC4, c#和Jquery。我使用JCrop jquery插件裁剪图像。问题是，我在内存中使用HTML5画布以base64格式上传图像，并在jquery ui对话框中显示相同的裁剪。我可以裁剪图像，但如何保存裁剪后的图像?对于这方面的任何帮助都是非常感激的。

Javascript代码

<script type="text/javascript">
    //Make global variables for selected image for further usage
    var selectImgWidth, selectImgHeight, jcrop_api, boundx, boundy, isError = false;
    var x = 0, y = 0, w = 0, h = 0;
    function showPreview(coords) {
        var rx = 100 / coords.w;
        var ry = 100 / coords.h;
        $('#preview').css({
            width: Math.round(rx * 500) + 'px',
            height: Math.round(ry * 370) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        }
        );
        x = Math.round(rx * coords.x);
        y = Math.round(ry * coords.y);
        w = Math.round(rx * 500);
        h = Math.round(ry * 370);
    }
    function readfile(input) {
        if (input.files && input.files[0]) {
            var reader = new window.FileReader();
            reader.onload = function (e) {
                //$('#image_preview').attr('src', e.target.result);
                //$('.oImageUploaderAdd').addClass('oHidden');
                //$('.oImageUploaderEdit').removeClass('oHidden');
                $('#jcrop_target').attr('src', e.target.result);
                $('#preview').attr('src', e.target.result);
                // destroy Jcrop if it is already existed
                if (typeof jcrop_api != 'undefined')
                    jcrop_api.destroy();
                $('#jcrop_target').Jcrop({
                    minSize: [0, 0],// min crop size
                    maxSize: [350, 350],
                    // aspectRatio : 1, // keep aspect ratio 1:1
                    //aspectRatio: 1,
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: showPreview,
                    onSelect: showPreview,
                    allowSelect: true,
                    allowMove: true,
                    allowResize: true,
                    setSelect: [
                        $('#jcrop_target').width() / 4,
                        $('#jcrop_target').height() / 4,
                        ($('#jcrop_target').width() / 4) * 3,
                        ($('#jcrop_target').height() / 4) * 3
                    ]
                }, function () {
                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];
                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                });
            };
            reader.readAsDataURL(input.files[0]);
            $("#dialog").dialog({
                width: 660,
                height: 'auto',
                resizable: false,
                modal: true,
                closeOnEscape: true,
                position: { my: "middle", at: "middle", of: window }
                , buttons: {
                    "Save Image": function () {
                        $.ajax({
                            type: "POST",
                            data: 'image=' + $("#jcrop_target").attr('src'),
                            url: "@Url.Action("UploadImage","Agent")",
                            success: function (respuesta) {
                                $('#jc-hidden-dialog').dialog('close');
                            }
                        });
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        }
    }
</script>

HTML标记

<div id="dialog" title="Add Portrait" style="display: none;">
        <header class="oFormHeader isHidden">
            <div class="oMsg oMsgError"></div>
        </header>
        <div class="cols" style="height: 413px;">
            <div class="col col3of4 oColSplit">
                <div class="oLoading isHidden"><span class="oNullBig">Loaded 100%...</span></div>
                <div class="jsFullImageBlock">
                    <div class="oImageUploaderFull" style="">
                        <div style="width: 450px; height: 338px; position: relative; display: block;" class="jcrop-holder">
                            <img style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 450px; height: 338px;" src id="jcrop_target">
                        </div>
                        <div class="oDropHere isHidden" style="display: block;">
                            <div><span class="oTxtMega">Drop Here</span></div>
                        </div>
                    </div>
                    <div style="font-size: 13px; font-weight: normal">Drag frame to adjust portrait.</div>
                    @*<form enctype="multipart/form-data" method="post" action="Abc">*@
                    <div class="oInputFileWrapper">
                        <input type="file" name="portrait" id="portrait" accept="image/png,image/gif,image/jpeg">
                    </div>
                    @*<a class="jsChooseFile" href="#">Upload a different photo ›</a>*@
                    <a style="color: #0093f0; font-size: 13px; font-weight: normal" href="#">Upload a different photo ›</a>
                    @*</form>*@
                </div>
            </div>
            <div class="col col1of4 txtCenter">
                <h2 class="oH2High">Your profile portrait</h2>
                <div class="oPortraitLarge oImagePreview" style="">
                    <div class="oImagePreviewArea" style="width: 100px; height: 100px; margin-left: 0px; margin-top: 0px;">
                        <img src style="width: 134px; height: 101px; margin-left: -16px; margin-top: -1px;" id="preview">
                    </div>
                </div>
                <section>
                    <div>
                        <button class="oBtn oBtnPrimary jsUseImage">Save Image</button>
                    </div>
                    <a class="oBtn oBtnCancel" href="#">Cancel</a>
                </section>
                <div class="oSupportInfo">Must be an actual picture of you! Logos, clip-art, group pictures, and digitally-altered images not allowed.</div>
            </div>
        </div>
    </div>

Answer 1

在MVC asp.net中尝试这个jcrop图像裁剪

public Image SaveImage(string image)
{
    //get a temp image from bytes, instead of loading from disk
    //data:image/gif;base64,
    //this image is a single pixel (black)
    byte[] bytes = Convert.FromBase64String(image);
    Image image;
    using (MemoryStream ms = new MemoryStream(bytes))
    {
        image = Image.FromStream(ms);
    }
    image.Save("fullOutputPath", System.Drawing.Imaging.ImageFormat.Png);
     return image;
}