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);
  }