圖片裁剪和異步上傳插件--一步到位（記錄）

圖片上傳裁剪這功能隨處可見，有的自己寫，不過太耗費時間了，插件的話感覺好多，前段時間就想挑一款好的插件，以后就用那款，可是挑了幾款插件用上去，效果很好，問題就出在合並了，單一的插件效果是很好的，沒問題，不然人家也不用吃飯了，可是當我把這幾款插件合並一起用的時候就各種奇怪的問題出來了，決解了一個又跑出一個來了，最后挑了好半天發現了一款還好用的，就趕緊的記錄下來了，不然以后要用又要找，麻煩死了，浪費時間啊，所以記錄一下心得，一步到位。

第一步：html代碼

<script src="~/Scripts/jquery-1.10.2.min.js"></script><!--要9.0以上的版本-->
<script src="~/js/jquery.form.js"></script><!--一步上傳提交（上傳）此插件不是裁剪，屬於另外

下載的，為了方便異步上傳提交-->
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/cropper.css" rel="stylesheet" />
<link href="~/css/docs.css" rel="stylesheet" />
<script src="~/js/bootstrap.min.js"></script>
<script src="~/js/cropper.js"></script><!--裁剪上傳 http://fengyuanchen.github.io/cropper/ 

-->

<form action="#" id="form_upload" method="post">
    <label style="width:60px;height:30px;" for="inputImage" title="打開圖片">
        <input class="hide" id="inputImage" name="file" type="file" 

accept="image/*">
                                                瀏覽...
    </label>
    <!--上傳提示-->
    <div class="upload_tag"></div>
    <div style="margin-top:10px;">
        <div style="width:100px;height:100px;">
                    <img alt="Picture" class="cropper" src="/images/background1.jpg" />
                </div><br /><br />
            <div class="preview preview-lg"></div>
        </div><br /><br />
    <div>
            <input type="submit" value="上傳" class="btn upload_point btn-primary" 

style="width:60px;height:30px;" />
        </div>
</form>

第二步：docs.js代碼

$(function () {
    var $image = $(".cropper"),
        $dataX = $("#dataX"),
        $dataY = $("#dataY"),
        $dataHeight = $("#dataHeight"),
        $dataWidth = $("#dataWidth"),
        //console = window.console || { log: $.noop },
        cropper;

    $image.cropper({
        aspectRatio: 1,//縱橫比例string/number,默認auto,1表示正方形,16/4表示長方形
        autoCropArea: 0.3,//0和1之間的數。定義自動裁剪區域的大小（百分比）
        zoomLevel: 1,//縮放級別
        //data: {//只支持四個屬性：“x”，“y”，“width”和“height”,默認情況下裁剪區將出

現在圖像的中心。
        //  x: 420,
        //  y: 50,
        //  width: 100,
        //  height: 100
        //},
        preview: ".preview",//jQuery選擇器預覽，添加額外的元素,預覽區域
        modal: true,//區分裁剪區和背景
        dashed: true,//設置裁剪區的方格虛線
        autoCrop: true,//是否自動顯示裁剪區
        dragCrop: true,//使刪除當前裁剪區，通過拖動在圖像上創建一個新的
        dashed: true,
        modal: true,
        movable: true,//移動裁剪區
        resizable: true,//調整裁剪區
        zoomable: true,//放大圖片
        rotatable: true,//旋轉圖片
        checkImageOrigin: true,//檢查圖像的來源，如果它是一個跨原產地形象,crossorigin屬性將

被添加到圖像元素使“旋轉”和“getdataurl”

        //maxWidth: 100,//裁剪區
        //maxHeight: 100,
        //minWidth: 100,
        //minHeight: 100,

        done: function (data) {//區域變化時觸發
            $dataX.val(data.x);
            $dataY.val(data.y);
            $dataHeight.val(data.height);
            $dataWidth.val(data.width);
        },

        build: function (e) {//創建裁剪區之前觸發
            
        },

        built: function (e) {//創建裁剪區之后觸發
            
            $image.cropper("zoom", -1);
        },

        dragstart: function (e) {//裁剪區移動之前觸發
            
        },

        dragmove: function (e) {//裁剪區移動之時觸發
            
        },

        dragend: function (e) {//裁剪區移動之后觸發
            
        }
    });
    $("#zoomOut").click(function () {
        $image.cropper("zoom", -1);
    });
    var $inputImage = $("#inputImage");

    if (window.FileReader) {//選擇圖片
        $inputImage.change(function () {
            var fileReader = new FileReader(),
                files = this.files,
                file;

            if (!files.length) {
                return;
            }

            file = files[0];

            if (/^image\/\w+$/.test(file.type)) {
                fileReader.readAsDataURL(file);
                fileReader.onload = function () {
                    $image.cropper("reset", true).cropper("replace", this.result).css

("width","100px");
                    $inputImage.val("");
                    
                };
            } else {
                showMessage("請選擇圖片.");
            }
        });
    } else {
        $inputImage.addClass("hide");
    }

});



//上傳代碼
$(".upload_point").click(function () {
    //alert($(".cropper").cropper("getDataURL"), type); return false;
        $("#form_upload").ajaxSubmit({
            url: "/Home/ProcessRequest",
            type: "post",
                dataType: "text",
                data: { "getDataURL": $(".cropper").cropper("getDataURL",{width: 50,height: 

50}) },//表示把base64的圖片字符格式提交到后台
                success: function (data) {
                    $(".upload_tag").text(data).css

({"color":"green","display":"block"});
                }, error: function () {
                        $(".upload_tag").text("上傳異常，請刷新或重新登錄").css({ "color": 

"red", "display": "block" });
                    }
        });
        return false;
});

第三步：后台代碼

[HttpPost]
public string ProcessRequest(FormCollection f)
{
    try
    {
            string byteStr = f["getDataURL"].ToString();//data:image/png;base64,       
                int delLength = byteStr.IndexOf(',') + 1;
                string str = byteStr.Substring(delLength, byteStr.Length - delLength);
                Image returnImage = Base64StringToImage(str);

                returnImage.Save(Server.MapPath("/images/head/") + Guid.NewGuid() + ".jpg", 

System.Drawing.Imaging.ImageFormat.Jpeg);
    }
    catch (Exception)
    {
            return "上傳失敗";
    }
        return "上傳成功";
}
//base64編碼的文本 轉為    圖片  
private Image Base64StringToImage(string txt)
{
    byte[] arr = Convert.FromBase64String(txt);
    MemoryStream ms = new MemoryStream(arr);
    Bitmap bmp = new Bitmap(ms);
    return bmp;
}