cropper.js 移动端上传图片 并 裁剪 的功能实现

定好页面  效果如图

要求 点击 + 号之后  上传图片  裁剪之后 放在页面上

实现

依赖  remodal 和 cropper.js 

把裁剪的内容 放在remodal里  点击 + 号的时候  remodal打开 可以上传

html代码

<div data-remodal-id="upload-modal" id="upload-modal">
                <button data-remodal-action="close" class="remodal-close"></button>
                <h4>上传一张作品图</h4>
                <div class="modal-content">
                    <form  id="file-form"  method="post" enctype="multipart/form-data" action="crop.php">
                        <!-- Upload image and data -->
                        <div class="upload-area ">
                            <input type="hidden"  name="img_src">
                            <input type="hidden"  name="activity_applicant_id">
                            <label for="imgInput">local upload</label>
                            <input type="file" class="img-input" id="imgInput" name="img_file">
                        </div>
                        <!-- Crop and preview -->
                        <div class="crop-wrapper">
                        <div class="crop-inner">
                        </div>
                        <div class="preview-inner">
                        </div>
                        </div>
                        <button type="submit" class="btn ">点击上传</button>
                    </form>
                </div>
            </div>

做成form 相对比较方便 

初始化remodal

 function Exhibitions() {
        this.currentIndex = 0;
        this.$wrapper = $('#exhibitions');
        this.activity_applicant_id = null;
        this.cropper = null;
        this.cropActive = false;
        this._remodal = $('[data-remodal-id=upload-modal]').remodal({
            hashTracking: false,
            closeOnOutsideClick: true
        });
}

+ 按钮点击的时候 

$plusBtn.on('click', function (e) {
            var id = $(this).data('id');
            _this._remodal.open();
            _this.activity_applicant_id = id;
            _this.initUpLoad();
        });

思路也有两种

第一种 前台剪切  然后把剪切后的小图发送给后台

另一种思路 后台剪切 把座标发给后台

    1  通过 本地 选择图片，预览，通过 选取框，选取一个正方形区域（可以设置大小和形状）

     2 本地获取 左顶点坐标(x,y)， 和宽度 高度 4个参数

     3 然后通过 form表单提交到后台 即可

     4 后台 先把源文件存放，然后通过一个工具类 把源文件根据这4个参数 裁剪，生成一张图片，

     5 提交给后台 ，根据后台返回的json 关闭弹出框，并且把作品的 src改为新设置的

这里采用第一种

测试数据  ajax地址  剪切完了 要发送给后台的地址

    
    

     
     

      
       //上传作品
     
     
     
     

      
              'uploadActivityVote' => '/api/get-exhibitions2',
     
     
    
    

点击+初始化cropper

  function startCropper(reader, imgFile, url) {
            var $cropper = Exhibitions.cropper;
            var $form = $('#file-form');
            //大图
            var $sourceFile = $form.find('.crop-inner');
            //小图
            var $cropPreview = $form.find('.preview-inner');

            //将文件显示在框中
            reader.onload = function (e) {

                if (Exhibitions.cropActive) {
                    Exhibitions.cropper('replace', url);
                } else {
                    Exhibitions.cropper = $('<img src="' + e.target.result + '" alt="" />');
                    $sourceFile.empty().html(Exhibitions.cropper);
                    Exhibitions.cropper.cropper({
                        aspectRatio: 10 / 7,
                        preview: $cropPreview,
                        viewMode: 3,
                        guides: false,裁剪框虚线 默认true有  
                        crop: function (e) {
                            // var json = [
                            //     '{"x":' + e.x,
                            //     '"y":' + e.y,
                            //     '"height":' + e.height,
                            //     '"width":' + e.width,
                            //     '"rotate":' + e.rotate + '}'
                            // ].join();
                            // $fileData.val(json);
                        }
                    });

                    Exhibitions.cropActive = true;
                }

            };
        }

cropper使用方法 见官方手册

然后点击“点击上传”发送请求

后台返回的数据  

然后把页面的的img的scr换成 返回的数据里面的src地址即可

第二种思路就是

初始化cropper的时候

  crop: function (e) {
                            // var json = [
                            //     '{"x":' + e.x,
                            //     '"y":' + e.y,
                            //     '"height":' + e.height,
                            //     '"width":' + e.width,
                            //     '"rotate":' + e.rotate + '}'
                            // ].join();
                            // $fileData.val(json);
                        }

我这里注释掉是因为我采取了第一种方法

这个cropper.js支持移动端