微信小程序图片选择区域裁剪实现方法

<view class="index_all_box">
 <view class="imgCut_header">
 <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view>
 <view class="imgCut_header_m" bindtap='clickUpImg'>点击上传图片</view>
 <view class="imgCut_header_r" bindtap='okBtn'>点击确认</view>
 </view>
 <!-- 选择裁剪模式 -->
 <view class="selectCutMode" wx:if='{{alreay}}'>
 <view class="selectCutMode_in {{cutType?'selectCutMode_in_act':''}}" bindtap='etcType'>
  等屏裁剪
 </view>
 <view class="selectCutMode_in {{!cutType?'selectCutMode_in_act':''}}" bindtap='areaType'>
  区域裁剪
 </view>
 </view>
 <view class="areaSelct_box" wx:if='{{!cutType && alreay}}'>
 <slider bindchange="areaChange" min="50" max="100" show-value value='{{propor}}'/>
 </view>
 <view class="cutImg_box" wx:if='{{!prienFlag}}'>
 <view class="cutImg_box_t">
  <image src="{{cutImgUrl}}" mode='widthFix'></image>
 </view>
 <view class="clickCutImg_txt" bindtap='againBtn'>重新裁剪</view>
 </view>
 <view class="allCavans" wx:if='{{prienFlag}}' style='width: {{canvasW}}px;height: {{canvasH}}px' >
 <canvas class='canvasSty' style='width: {{canvasW}}px;height: {{canvasH}}px' canvas-id='cutImg' disable-scroll='true' bindtouchmove='canvasMove'></canvas>
 <view class="allCavans_inbg" style='width: {{canvasW}}px;height:{{canvasH}}px; background: url({{img}});background-size: 100% 100%'></view>
 </view>
 
 
</view>

.imgCut_header{
 padding: 30rpx;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #000;
 color: #fff;
 font-size: 24rpx;
}
.allCavans{
 margin: 20rpx auto;
 position: relative;
}
.canvasSty{
 position: absolute;
}
.cutImg_box{
 width: 100%;
 
 border-bottom: 2rpx #f98700 solid;
 padding-bottom: 20rpx;
}
.cutImg_box .cutImg_box_t{
 width: 90%;
 margin: 20rpx auto;
}
.cutImg_box image{
 width: 100%;
}
.cutImg_box .cutImg_box_b{
 margin-top: 20rpx;
 width: 80%;
 height: 80rpx;
 line-height: 80rpx;
 background: #f98700;
 color: #fff;
 border-radius: 10rpx;
 text-align: center;
 margin:0rpx auto;
}
.selectCutMode{
 background: #fff;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.selectCutMode .selectCutMode_in{
 width: 100%;
 text-align: center;
 background: #fff;
 color: #f98700;
 font-size: 24rpx;
 padding: 20rpx;
}
.selectCutMode .selectCutMode_in_act{
 background: #f98700;
 color: #fff;
 padding: 20rpx;
}
.areaSelct_box{
 width: 100%;
 display: flex;
 align-items: center;
 height: 50rpx;
 justify-content: center;
 margin-top: 20rpx;
}
.areaSelct_box slider{
 width: 80%;
}
.cutImg_box .clickCutImg_txt{
 width: 100%;
 text-align: center;
 height: 50rpx;
 font-size: 24rpx;
 line-height: 50rpx;
 color: #999;
}