使用cropper插件进行图片裁剪 并上传

cropper插件的使用和 github地址：

• github
• 官方实例

我参考的中文文档：

• https://www.cnblogs.com/baka-sky/p/8001577.html

cropper+mvc的代码

js和前台的代码 （参考中文文档里的代码）

使用插件裁剪完成图片后 图片的格式是blob类型的 类似这样 （blob:http://localhost:......），

使用的样式是模态框版，就是在模态框中裁剪完图片，然后点击提交会先 “ 显示 ” 裁剪后的图片，再点击我页面中的确定才会向后台发送ajax请求。

图片裁剪后所执行的方法：

$('#photo').cropper('getCroppedCanvas', {
        width: 300,
        height: 300
}).toBlob(function (blob) {
        that.obj = blob;//that.obj是我自己定义的变量。ajax上传时要用
        $('#user-photo').attr('src', URL.createObjectURL(blob));
        $('#changeModal').modal('hide');
})

这是ajax上传的代码：

 var formData = new FormData();//使用formdata进行传输
 formData.append("file", that.obj);//that.obj是blob类型
 formData.append("data", that.formItem);//我的表单，用不到可以忽略
$.ajax({
       url: '/account/sever', //要上传的地址
       type: 'post',
       data: formData,
       contentType: false,//1.必须加上这两个
       processData: false,//2.否则请求不了后台方法
       success: function (url) {//返回值
       if (url != "") {
              $('#user-photo').attr('src', url);
              $('#changeModal').modal('hide');
           }
       }
  });

后台代码：

DocumentDirectory 是我自己定义的文件位置
private const string DocumentDirectory = "/upload/account"; 这是文件路径

[HttpPost] 
        public string Sever()
        {
            var files = Request.Files;// 从前台获取文件
            var url="";
            if (files.Count>0)
            {
                if (files.Count == 0) throw new UserFriendlyException("未选择文件");
                var absolutePath = Request.MapPath(DocumentDirectory);
                if (!Directory.Exists(absolutePath)) Directory.CreateDirectory(absolutePath);

                var attachment = files[0];
                var fileName = Guid.NewGuid().ToString("N") + Path.GetExtension(attachment.FileName)+".jpg";//上传文件后没有扩展名，这是我自己加的。
                var filePath = Path.Combine(absolutePath, fileName);
                attachment.SaveAs(filePath);
                url = DocumentDirectory + "/" + fileName;//因为为要返回的url是图片的相对路径，所以这个url是自己拼出来的
            }
            return url;
        }

本来ajax是放在裁剪完后的代码里的

var that = this;
$('#photo').cropper('getCroppedCanvas', {
    width: 300,
    height: 300
}).toBlob(function (blob) {
    var formData = new FormData();
    formData.append("file", blob);
    formData.append("data", that.formItem);
    $.ajax({
         url: '/account/sever', //要上传的地址
         type: 'post',
         data: formData,
         contentType: false,
         processData: false,
         success: function (url) {
              if (url != "") {
                 $('#user-photo').attr('src', url);
                 $('#changeModal').modal('hide');
               }
         }
     });
})

 

后来发现，我只要裁剪完图片他就直接将图片保存到服务器，就把它们分开了，只有点击提交时才会修改和保存图片。