ionic3+angular4 使用cropperJS 完成图片裁剪功能

需求：

图片拍照或者图库选择之后，将图片进行裁剪（图片允许放大，缩小，移动），裁剪框不变

实现：

1.安装cropperjs: npm install cropperjs

2.在页面中导入：

3.裁剪插件初始化

initCropper(){
    let image = document.getElementById("imgPrev") as HTMLImageElement;
    this.cropper = new Cropper(image,{
      viewMode:0, //0：没有限制;1:裁剪框必须在图片内移动；2：2图片 不全部铺满1；3：图片填充整个裁剪框
      dragMode  :'move',//'crop': 可以产生一个新的裁剪框  ‘move’: 只可以移动3  ‘none’: 什么也不处理
      responsive:true, //调整窗口大小时，重新渲染cropper
      cropBoxResizable:false, //调整裁剪框大小
      autoCropArea:1,  //自动裁剪面积大小和图片的对比 
      center:true,  //裁剪框在图片正中心。
      cropBoxMovable :false, //是否允许移动裁剪框
      autoCrop:true, //初始化时，自动生成裁剪框 当初始化时，可以自动生成图像。（就是自动显示裁剪框，改成false裁剪框自动消失）
      background:true, //显示裁剪区域的背景方格-显示容器的网格背景。（就是后面的马赛克）
      modal:false,   //显示图片上方的黑色模态并在裁剪框下面。
      guides:false, //显示在裁剪框上方的虚线
      highlight:true, //在裁剪框上方显示白色的区域(突出裁剪框)。
      zoomOnWheel:true,  //是否可以通过移动鼠标放大图像
      zoomOnTouch:true, //是否可以通过拖动触摸放大图像
      zoomable:true,//是否允许放大图像
      movable:true, //是否允许移动后面的图片
      rotatable:true, //是否允许旋转图像
      scalable:true,//是否允许缩放图像
      restore:true, //在调整窗口大小后恢复裁剪的区域。
      minContainerWidth:200,//容器的最小宽度
      minContainerHeight:100,//容器的最小高度
      minCropBoxWidth:100,//裁剪层的最小宽度
      minCropBoxHeight:50,//裁剪层的最小高度
      wheelZoomRatio:0.1, //鼠标移动图像时，定义缩放比例
      aspectRatio: 1/1, //裁剪框的宽高比
      zoom: function (e) {
      },
      crop: function (e) {
       
      },

    });

    setTimeout(()=>{
      let winWidth = document.body.offsetWidth;
      let winHeight = document.body.offsetHeight*0.75;
      let boxClipWid = winWidth*0.6;
      let boxClipTop = (winHeight-boxClipWid)/2;
      let boxClipLeft = (winWidth-boxClipWid)/2;
      this.cropper.setCropBoxData({
        left: boxClipLeft,
        top: boxClipTop,
        width: boxClipWid,
        height:boxClipWid,
      })
    },200)
  }

这个地方一定要选 move！！！

4.裁剪：

 clip(){
    let clipImgdata = this.cropper.getCroppedCanvas();
    this.clipUrl = clipImgdata.toDataURL('image/jpg');
    this.viewCtrl.dismiss(this.clipUrl);
  }