cropper实现基本的裁剪图片并上传

使用cropper之前需要先引用 cropper.css 和 cropper.js

cropper 官网：https://fengyuanchen.github.io/cropper/

cropper.css下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/css

cropper.js下载：https://github.com/fengyuanchen/cropperjs/tree/master/docs/js

然后我们来了解一下cropper的基本属性及方法

参数options

　　 1. viewMode(定义cropper的视图模式)

类型:number；默认：0；可以使用0,1,2,3；

0：没有限制，3可以移动到2外。
  
1 : 3只能在2内移动。
  
2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
  
3：2图片填充整个1

　　 2. dragMode (定义cropper的拖拽模式)

类型: String
 
默认: ‘crop’
 
选项:
 
‘crop’: 可以产生一个新的裁剪框3
 
‘move’: 只可以移动3
 
‘none’: 什么也不处理

　　 3. aspectRatio—-裁剪框的宽高比

类型:number；默认：NAN；
 
在默认的时候。可以随意改变裁剪框的大小；我这里的设置的值为 16/9;

　　 4. data—如果您已经存储了以前的数据，那么在构建时将会自动将其传递给setData方法。(具体怎么用还不知道)

　　 5. preview—-添加额外的元素(容器)以供预览

类型：Element / String 默认：“ ”；
 
注意这里是一个dom元素。必须可以被Document.querySelectorAll获取到；
 
preview:".small",
 
HTML结构：<div class="small"></div>；注意一定要设置small的宽高；最好和裁剪比例一致；还有如果要想正确的显示出裁剪的区域需要加上样式overflow: hidden;

　　6. center—裁剪框在图片正中心。

　　7. background–显示容器的网格背景。（就是后面的马赛克）

　　8. rotatable–是否允许旋转图像。

　　9. scalable–是否允许缩放图像。

　　10. zoomable–是否允许放大图像。

　　11. ready—插件准备完成执行的函数（只执行一次）。

　　12. crop—剪裁框发生变化执行的函数。

　　13. zoom—剪裁框缩放的时候执行的函数。

Methods 方法

使用方法示例：
$().cropper({
  ready: function () {
    $().cropper('method', argument1, , argument2, ..., argumentN);
  }
});

1. crop 手动显示裁剪框
　　$("#image").cropper({ 
　　　　autoCrop: false, //关闭自动显示裁剪框 
　　　　ready: function () { 
　　　　　　$(this).cropper('crop'); 
　　　　} 
　　});
2 . reset—-将图像和裁剪框重置为初始状态

　　$("#reset").on("click", function () {
        $('#image').cropper('reset');
    })
3 . clear—清除裁切框

　　$("#clear").on("click", function () {
        $('#image').cropper('clear');
    })
4. replace(url[, onlyColorChanged])—替换图像的src并重新构建cropper
　　$("#replace").on("click", function () { 
　　　　$('#image').cropper('replace',"./images/111.jpeg",true ); 
　　})
5. enable()—解锁，锁定的裁切框（与disable相对应）
　　$("#enable").on("click", function () { 
　　　　$('#image').cropper('enable'); 
　　})
6 . disable()—锁定的裁切框（裁切框不可移动）（与enable相对应）

　　$("#disable").on("click", function () {
        $('#image').cropper('disable');
    })
7.destroy()—销毁cropper并从图像中删除整个cropper。
　　$("#destroy").on("click", function () { 
　　　　$('#image').cropper('destroy'); 
　　})

代码示例：　

　　<style> 
　　　　.row{ 
　　　　　　margin-bottom: 5px; 
　　　　} 
　　　　#photo { 
　　　　　　max-width: 100%; 
　　　　} 
　　　　.img-preview { 
　　　　　　width: 100px; 
　　　　　　height: 100px; 
　　　　　　overflow: hidden; 
　　　　} 
　　　　button { 
　　　　　　margin-top:10px; 
　　　　} 
　　　　#result { 
　　　　　　width: 150px; 
　　　　　　height: 150px; 
　　　　} 
　　</style>
　　<div class="row">
        <div class="col-sm-12 text-center">
            <label for="input" class="btn btn-danger" id="">
            <span>选择图片</span>
            <input type="file" id="input" class="sr-only">
            </label>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-2">
            <img src="" id="photo">
        </div>
        <div class="col-sm-2">
            <div>
                <p>
                    预览(100*100)：
                </p>
                <div class="img-preview">
                </div>
            </div>
            <button class="btn btn-primary" onclick="crop()">裁剪图片</button>
            <div>
                <br/>
                <p>
                    结果：
                </p>
                <img src="" alt="裁剪结果" id="result">
            </div>
        </div>
    </div>

　　<script>
        // 修改自官方demo的js
        var initCropper = function (img, input){
            var $image = img;
            var options = {
                aspectRatio: 1, // 纵横比
                viewMode: 2,
                preview: '.img-preview' // 预览图的class名
            };
            $image.cropper(options);
            var $inputImage = input;
            var uploadedImageURL;
            if (URL) {
                // 给input添加监听
                $inputImage.change(function () {
                    var files = this.files;
                    var file;
                    if (!$image.data('cropper')) {
                        return;
                    }
                    if (files && files.length) {
                        file = files[0];
                        // 判断是否是图像文件
                        if (/^image\/\w+$/.test(file.type)) {
                            // 如果URL已存在就先释放
                            if (uploadedImageURL) {
                                URL.revokeObjectURL(uploadedImageURL);
                            }
                            uploadedImageURL = URL.createObjectURL(file);
                            // 销毁cropper后更改src属性再重新创建cropper
                            $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                            $inputImage.val('');
                        } else {
                          window.alert('请选择一个图像文件！');
                      }
                  }
              });
            } else {
                $inputImage.prop('disabled', true).addClass('disabled');
            }
        }
        var crop = function () {
            var photo = $('#photo').cropper('getCroppedCanvas', {
                 // 裁剪后的长宽
                height: 160
            }).toDataURL('image/png');
            console.log(photo);
            $.ajax({
                url: '/Attachment/Uploadphoto', // 要上传的地址
                method: 'post',
                data: { dataURL:photo },
                success: function (data) {
                    $('#result').attr('src', data).show();
                    $('#img').val(data);
                },
                error: function (data) {
                    alert(data);
                }
            });
        }
        $(function(){
            initCropper($('#photo'),$('#input'));
        });
    </script>

后台代码：

　　 /// <summary>
        /// 上传裁剪图片(头像)
        /// </summary>
        /// <param name="dataURL"></param>
        /// <returns></returns>
        public ActionResult Uploadphoto(string dataURL)
        {
            //将‘，’以前的多余字符串去除
            string base64 = dataURL.Substring(dataURL.IndexOf(",") + 1);
            byte[] bytearr = Convert.FromBase64String(base64);
            MemoryStream ms = new MemoryStream(bytearr);
            //将MemoryStream对象转换成Bitmap对象
            Bitmap bmp = new Bitmap(ms);
            //关闭流
            ms.Close();
            string dir = DateTime.Now.ToString("yyyyMMdd");
            string abpath = Server.MapPath($"/upload/{dir}/");
            if (!Directory.Exists(abpath))
            {
                Directory.CreateDirectory(abpath);
            }
            string newname = Guid.NewGuid().ToString().Substring(0, 6) + ".png";

            bmp.Save(abpath + newname, System.Drawing.Imaging.ImageFormat.Png);

            return Content($"/upload/{dir}/{newname}");
        }