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

微信小程序图片选择区域实现裁剪功能方法教程
本文主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

本文主要介绍了微信小程序图片选择区域屏裁剪实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

效果图

HTML代码

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