上載圖像文件，將其加載以在jQuery模式對話框中進行裁剪，並保存裁剪后的圖像，ASP.NET MVC，C＃，JQuery

Question

我正在開發一個應用程序，用戶可以在其中上傳他的頭像/個人資料照片。 我想允許用戶通過在jquery對話框上載圖像來裁剪圖像。 裁剪后，用戶可以保存裁剪后的圖像。 我正在使用ASP.NET MVC4，C＃和Jquery。 我正在使用JCrop jquery插件來裁剪圖像。 問題是，我正在使用HTML5 canvas以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;
}