cropper 图片裁剪，固定图片宽高

///

 

           
   

    $scope.minWidth = 429;
    $scope.minHeight = 290;

    //图片裁剪工具配置
    var URL = window.URL || window.webkitURL;
    var $image = $('.img-container > img');
    var options = {
        //strict: false,//默认值true,在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
        // responsive: false,//默认值true是否在窗口尺寸改变的时候重置cropper
        // checkImageOrigin: false,//检测图片源

        // modal: false,//默认true,是否在剪裁框上显示黑色的模态窗口。
        // guides: false,//默认值true是否在剪裁框上显示虚线。
        // highlight: false,//默认值true是否在剪裁框上显示白色的模态窗口。
        // background: false,//默认值true,是否在容器上显示网格背景。

        autoCrop: false,//默认值true,是否在初始化时允许自动剪裁图片。
        //autoCropArea: 0.5,//0-1之间的数值,默认值0.8，定义自动剪裁区域的大小。
        //dragCrop: false,//默认值true,是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
        //movable: false,//默认值true是否允许移动剪裁框。
        //resizable: false,//默认值true,是否允许改变剪裁框的大小。
        rotatable: false,
        scalable: false,
        zoomable: false,//默认值true是否允许放大缩小图片。
        //touchDragZoom: false,//默认值true是否允许通过触摸移动来缩放图片。
        //mouseWheelZoom: false,//默认值true是否允许通过鼠标滚轮来缩放图片。

        //minCanvasWidth: $scope.minWidth + 100,//默认值0canvas 的最小宽度（image wrapper）
        //minCanvasHeight: $scope.minHeight + 100,
        //minCropBoxWidth: $scope.minWidth,//类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
        //minCropBoxHeight: $scope.minHeight,//类型：Number，默认值0。canvas 的最小高度（image wrapper）。
        //minContainerWidth: $scope.minWidth + 100,//类型：Number，默认值200。容器的最小宽度。
        //minContainerHeight: $scope.minHeight + 100,//类型：Number，默认值100。容器的最小高度。

        // build: null,//build.cropper事件的简写方式
        // built: null,//built.cropper事件的简写方式。
        // dragstart: null,//dragstart.cropper事件的简写方式。
        // dragmove: null,
        // dragend: null,
        // zoomin: null,//缩放图片，正数（ratio > 0）
        // zoomout: null,//缩放图片，正数（ratio < 0）

        //aspectRatio: $scope.minWidth / $scope.minHeight,//默认值NaN。设置剪裁容器的比例。2.929 / 1
        ready: function () {
            $image.cropper('crop');
            $image.cropper('setData', {
                width: $scope.minWidth,
                height: $scope.minHeight
            });
        }
        //preview: '.img-preview',//类型：String(jQuery选择器)，默认值”。添加额外的元素（容器）的预览。
        //crop: function (data) {//类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
        //    data.height < $scope.width && (data.height = $scope.width);
        //    data.width < $scope.width && (data.width = $scope.width);
        //$dataX.val(Math.round(data.x));
        //$dataY.val(Math.round(data.y));
        //$dataHeight.val(Math.round(data.height));
        //$dataWidth.val(Math.round(data.width));
        //$dataRotate.val(Math.round(data.rotate));
        //}
    };
    var startCropper = function (src) {
        $image.attr("src", src);
        $image.cropper(options);

        $image.on('cropmove', function (e) {
            var data = $image.cropper('getData');
            if (data.width !== $scope.minWidth || data.height !== $scope.minHeight) {
                $image.cropper('setData', {
                    width: $scope.minWidth,
                    height: $scope.minHeight
                });
                //e.preventDefault();
            }
        });
        $image.on('cropend', function (e) {
            var data = $image.cropper('getData');
            if (data.width !== $scope.minWidth || data.height !== $scope.minHeight) {
                $image.cropper('setData', {
                    width: $scope.minWidth,
                    height: $scope.minHeight
                });
            }
        });
    }
    var active = false;
    $scope.getFile = function () {
        //console.log($scope.files.length);
        if (!$scope.files || $scope.files.length < 1) return false;

        var file = $scope.files[0];
        if (file.type.indexOf("image") !== 0) {
            layer.msg(file.name + "不是图片文件！");
            return false;
        }
        //$scope.picFiles = file;//图片
        Dialog.showDiv("j_hopup_pic");
        //blobURL = URL.createObjectURL(file);
        var src = objUrlService.getObjectUrl(file);

        if (active) {
            $image.cropper('replace', src);
        } else {
            startCropper(src);
            active = true;
        }
    }

    $scope.savePic = function () {
        var canvas = $image.cropper("getCroppedCanvas", undefined);
        var base64 = canvas.toDataURL(); //, 0.5).substr(22);//jpeg
        picFile = toBlobServer.dataUrltoBlob(base64);
        var src = URL.createObjectURL(picFile);
        //blob.fileName = src;

        Dialog.close("j_hopup_pic");
        $scope.data.ProductPic = src; //file.name;

        //$scope.$digest($scope.data.ProductPic);

        //if (blob.size <= 204800) { //大于200KB时压缩图片
        //    $scope.shopPic = { "id": src, "file": blob };
        //} else {
        //    compressService.resizeFile(src).then(function (data) {
        //        $scope.shopPic = { "id": data.src, "file": data.blob }
        //    });
        //}
    }