【轉】小程序圖片裁剪組件

最近開始做微信小程序項目，其中有需要圖片裁剪的功能。

微信小程序擁有許多方便的API，相機相冊調用作為移動端使用頻率最高的API之一，小程序做了非常好的封裝，使用上也非常舒服。然而，翻遍了整篇小程序開發文檔，仍然沒能找到裁剪相關的描述。難道小程序官方沒考慮過為小程序提供一個裁剪API嗎。

裁剪API是沒找到，優秀的開源的第三方裁剪組件還是能找到一些的，試用了幾個，跟自己預期的裁剪方法不太一樣，之前做過一段時間的原生開發，Android系統自帶就有一個不錯的裁剪方法，我想能不能做一個防Android系統裁剪的小程序組件呢？

好在小程序提供了一個canvas畫布組件，提供了非常豐富的API，可以在畫布中繪制圖片，並將畫布中的圖形輸出，這個組件正合適用來做裁剪功能，事實上，其他一些第三方裁剪組件，也正是基於這個畫布組件來制作的。

自己動手豐衣足食，開始自己造輪子。

那么，來吧，放預覽圖。

 

使用說明

核心邏輯寫在組件中，在需要剪裁的頁面引入組件即可。同時禁用頁面彈動（ios端頁面默認有頁面彈動屬性，需要禁用）。

{
"usingComponents": {
"cropper":"/pages/cropper/cropper"
},
"disableScroll": true
}

 

頁面布局部分

<!--pages/cropper/cropper-sample.wxml-->
<view class='body'>
<!-- 裁剪組件 -->
<cropper id='cropper' class='stage'></cropper>
 
<!-- 取消 和 確認 按鈕，並綁定事件 -->
<view class='bar'>
<view class='btn btn-cancel' bindtap='fnCancel'>取消</view>
<view class='btn btn-submit' bindtap='fnSubmit'>確定</view>
</view>
</view>

 

頁面樣式

page{
  height: 100%;
  box-sizing: border-box;
}
.body{
  height: 100%;
  display: flex;
  flex-direction: column;
}
 
.stage{
  flex-grow: 1;
}
 
.bar{
  height: 80rpx;
  padding: 36rpx;
  display: flex;
  flex-direction: row;
  background-color: black;
}
 
.btn{
  position: relative;
  flex-grow: 1;
    border: 2rpx solid grey;
  line-height: 80rpx;
  text-align: center;
    color: white;
   font-size: 32rpx;
}
 
.btn-cancel{
   border-top-left-radius: 40rpx;
   border-bottom-left-radius: 40rpx;
}
 
.btn-submit{
   border-top-right-radius: 40rpx;
   border-bottom-right-radius: 40rpx;
}

 

漂亮的布局有了，接着就可以再js里愉快的裁剪圖片了。

 

 

再頁面加載回調中，對組件進行初始化。

imagePath必填，其他參數都有默認值，都是可選的。

裁剪的寬高比是可以約束的，只需要設置aspectRatio屬性，就可以約束裁剪的寬高比。在裁剪用戶頭像時，需要裁剪正方形圖片時，aspectRatio屬性便會變的非常有用，此時，設置aspectRatio為1，就可以裁剪出正方形的圖片。

  onLoad: function (options) {
 
    cropper = this.selectComponent('#cropper');
    cropper.fnInit({
      imagePath:'/assets/test.jpg',       //*必填
      debug: true,                        //可選。是否啟用調試，默認值為false。true：打印過程日志；false：關閉過程日志
      outputFileType: 'jpg',              //可選。目標文件的類型。默認值為jpg，jpg：輸出jpg格式圖片；png：輸出png格式圖片
      quality: 1,                         //可選。圖片的質量。默認值為1，即最高質量。目前僅對 jpg 有效。取值范圍為 (0, 1]，不在范圍內時當作 1.0 處理。
      aspectRatio: 1.25,                  //可選。裁剪的寬高比，默認null，即不限制剪裁寬高比。aspectRatio需大於0
      minBoxWidthRatio: 0.2,              //可選。最小剪裁尺寸與原圖尺寸的比率，默認0.15，即寬度最小剪裁到原圖的0.15寬。
      minBoxHeightRatio: 0.2,             //可選。同minBoxWidthRatio，當設置aspectRatio時，minBoxHeight值設置無效。minBoxHeight值由minBoxWidth 和 aspectRatio自動計算得到。
      initialBoxWidthRatio: 0.6,          //可選。剪裁框初始大小比率。默認值0.6，即剪裁框默認寬度為圖片寬度的0.6倍。
      initialBoxHeightRatio: 0.6          //可選。同initialBoxWidthRatio，當設置aspectRatio時，initialBoxHeightRatio值設置無效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自動計算得到。
      });
  }

 

canvas畫布裁剪邏輯已經封裝好，只需要調用組件的fnCrop方法便可以完成裁剪。

  fnSubmit:function(){
    //do crop
    cropper.fnCrop({
 
      //剪裁成功的回調
      success:function(res){
         //生成文件的臨時路徑
        console.log(res.tempFilePath);
        wx.previewImage({
          urls: [res.tempFilePath],
        })
      }
 
    });
  }

 

組件源碼 和 裁剪demo 放在github： 

https://github.com/light-wind/wx-cropper

from:https://blog.csdn.net/u011054919/article/details/91136038