cropper.js图片裁剪——第二弹

 $(".dialog").show();
                            //$(‘#image‘) 是img 标签，是获取到的result
                            // destroy 销毁cropper并从图像中删除整个cropper
                            //cropper 开始调用裁剪
                            $(‘#image‘).cropper(‘destroy‘).attr(‘src‘, result).cropper({
                                aspectRatio: 0.75, // 纵横比
                                //viewMode定义cropper的视图模式
                                /*  0：没有限制，3可以移动到2外。
                                    1 : 3只能在2内移动。
                                    2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
                                    3：2图片填充整个1
                                    */
                                viewMode: 1,
                                //显示在裁剪框上方的虚线
                                guides: false,
                            });
                            $(".finish").on(‘click‘, function () {
                                //确定裁剪
                                crop();
                                $(".dialog").hide();
                            });
                            $(".cancle").on(‘click‘, function () {
                                //裁剪取消
                                crop_cancle();
                                $(".dialog").hide();
                            });

 var resImg = null;      //剪切后图片base64编码资源
    //确定裁剪的方法
    var crop = function () {
        var img = $(‘#image‘);
        var $target = $(‘#upload‘);
        //getCroppedCanvas画一张剪裁的图片。如果没有剪裁，则返回一个绘制整个im的画布
        resImg = img.cropper(‘getCroppedCanvas‘, {
            // width输出Canvas的宽度
            // height输出Canvas的高度
            width: 900,
            height: 1200
        }).toDataURL(‘image/jpeg‘);//返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。q
        $target.attr(‘src‘, resImg);
      
        //利用表单提交 这个是隐藏input用来提交 裁剪之后的banse64源码
        $(‘#upImg‘).val(resImg);
    };
    //取消裁剪
    var crop_cancle = function () {
        console.log( $(‘#upImg‘).val())
        //将图片置空
        $(‘#image‘).attr(‘src‘, ‘‘);
    };