阅读背景:

(微信,支付宝)小程序头像上传选择裁剪区域

来源:互联网 
<!--微信小程序 -->
<view>
<view bindtap='upEwm'>
  <view>头像</view>
  <image style='width:200rpx;height:200rpx;background-color:red' src='{{headImg}}'></image>
</view>
</view>

<!--裁剪图片浮层-->
<view class='fixed-upimg' wx:if="{{imageFixed}}">
  <view class="wx-content-info">
    <view wx:if="{{isShowImg}}" class="wx-corpper" style="width:{{cropperInitW}}rpx;height:{{cropperInitH}}rpx;background:#000">
      <view bindtap='upLoad' class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;left:{{cropperL}}rpx;top:{{cropperT}}rpx">
        <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
        <view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}rpx;height:{{cutH}}rpx;left:{{cutL}}rpx;top:{{cutT}}rpx">
          <view class="wx-cropper-view-box">
            <view class="wx-cropper-dashed-h"></view>
            <view class="wx-cropper-dashed-v"></view>
            <view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
            <view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
            <view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
            <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
          </view>
        </view>
      </view>
    </view>
    <canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}rpx;height:{{imageH}}rpx;top:-9999px;left:-9999px;"></canvas>
    <button type="primary" bindtap="getImageInfo" style="position:fixed;bottom:120rpx;width:90%;left:50%;transform:translate3d(-50%,0,0)"> 确认提交 </button>
  </view>
</view>
<!--微信小程序 -->
<view>
<view bindtap='upEwm'&g



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: