<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>

$(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;
});

 1 [HttpPost]
 2 public string ProcessRequest(FormCollection f)
 3 {
 4     try
 5     {
 6             string byteStr = f["getDataURL"].ToString();//data:image/png;base64,
 7                 int delLength = byteStr.IndexOf(',') + 1;
 8                 string str = byteStr.Substring(delLength, byteStr.Length - delLength);
 9                 Image returnImage = Base64StringToImage(str);
10
11                 returnImage.Save(Server.MapPath("/images/head/") + Guid.NewGuid() + ".jpg",
12
13 System.Drawing.Imaging.ImageFormat.Jpeg);
14     }
15     catch (Exception)
16     {
17             return "上传失败";
18     }
19         return "上传成功";
20 }
21 //base64编码的文本 转为    图片
22 private Image Base64StringToImage(string txt)
23 {
24     byte[] arr = Convert.FromBase64String(txt);
25     MemoryStream ms = new MemoryStream(arr);
26     Bitmap bmp = new Bitmap(ms);
27     return bmp;
28 }