结合canvas和jquery.Jcrop.js裁切图像上传图片

1、引入的外部资源：

jquery.Jcrop.css、jquery.Jcrop.js、upimg.js

2、使用的页面元素

                    @* 选择照片 *@
                    <div class="line">
                        <h2 class="not">请选择照片：</h2>
                        <div class="">
                            <input id="image_file" name="updata_file" accept="image/gif,image/jpg,image/bmp,image/jpeg,image/png,image/tiff,image/tif" style="display:none" value="选择照片" type="file" />
                            <button id="image_filebtn" class="hex-lightgrey-btn" type="button">选择照片</button>
                            <button id="save_btn" class="hex-green-btn" style="display: none" type="button">确认修改</button>
                            <span class="hex-font-orange error">仅支持JPG、PNG格式图片，且文件小于2M</span>
                        </div>
                    </div>
                    @* 头像裁剪和预览 *@
                    <div class="img">
                        <div id="wrapper" class="hex-wrapper" style="width: 600px;height: 600px">
                            @if (!string.IsNullOrEmpty(Model.Profile.User.Avatar))
                            {
                                <img id="preview" src="@WebTools.ConvertResourceUrl(Model.Profile.User.Avatar)" />
                            }
                            else
                            {
                                <img id="preview" src="/Content/Images/userdefault.jpg" />
                            }
                        </div>
                        <div>
                            <h6>头像预览：</h6>
                            <canvas id="cropper" width="250" height="250"></canvas>
                        </div>
                    </div>

 

3、使用的脚本方法

var cropper;
$(document).ready(function () {
    $("#image_file").change(function () {
        Loading();
        fileSelectHandler();
        var errorMsg = $(".error").html();
        if (errorMsg != "请选择一个有效的图像文件（JPG和PNG是被允许的)" && errorMsg != "您选择的文件太大，请选择一个较小的图像文件") {
            $("#save_btn").show();
        }
        LoadingEnd();
    });
    $("#image_filebtn").click(function () {
        $("#image_file").click();
    });

    $("#save_btn").bind("click", function () {
        Loading();
        var imgUrl = document.getElementById("cropper").toDataURL("image/png");
        var imageData = encodeURIComponent(imgUrl);
        $.ajax({
            url: "/Profile/PhotoHandle",
            type: "post",
            data: { imageData: imageData },
            success: function (data) {
                if (data) {
                    document.getElementById("photo_img").src = imgUrl;
                } else {
                    alertno("删除失败");
                    LoadingEnd();
                }
            }
        });
    });
});

 

4、control的方法，发送服务器请求

     public ActionResult PhotoHandle(string imageData)
        {
            string imgStr = HttpUtility.UrlDecode(imageData, Encoding.UTF8).Split(',')[1];
            byte[] imageBytes = Convert.FromBase64String(imgStr);
            string result = SaveImage(imageBytes, CurrentUser.Name);
            var obj = Common.Serialization.JsonHelper.JsonToObject<UpLoadBack>(result);
            EntAppFrameWorkContext.DomainModelService.ExtenedService<IUser>()
                .UpdateAvatar(Int64.Parse(CurrentUser.Key), obj.ResourceID.ToString());return Content(obj.ResourceID.ToString());
        }

        public static string SaveImage(byte[] imageBytes, string CurrentUserName)
        {
            string cms = WebConfigHelper.CmsWebsite.Replace("https", "http");
            if (string.IsNullOrEmpty(cms)) return null;
            var token = Token.GetToken(CurrentUserName);
            string url = cms.TrimEnd('/') + "/FileManagement/UpLoadFile_Server?ssotoken=" + token;
            HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
            request.Method = "POST";
            request.KeepAlive = true;
            request.ContentType = "application/x-www-form-urlencoded";
            request.Headers.Add("ext", "png");
            request.Headers.Add("contentType", "image/png");
            request.Headers.Add("hash", imageBytes.GetHashCode().ToString());
            //填充POST数据
            request.ContentLength = imageBytes.Length;
            //myReq.
            Stream requestStream = request.GetRequestStream();
            requestStream.Write(imageBytes, 0, imageBytes.Length);
            requestStream.Close();
            string result = string.Empty;
            try
            {
                //发送POST数据请求服务器
                HttpWebResponse HttpWResp = (HttpWebResponse)request.GetResponse();

                Stream myStream = HttpWResp.GetResponseStream();

                //获取服务器返回信息
                StreamReader reader = new StreamReader(myStream, Encoding.UTF8);
                result = reader.ReadToEnd();


                //释放
                myStream.Close();

            }
            catch (Exception exp)
            {
                result = "报错：" + exp.Message;
            }

            return result;
        }