1 |
- <view data-ref="cropper" hidden="{{!(show)}}" class="vue-cropper data-v-701980e7 vue-ref" style="{{'top:'+(containerTop+'px')+';'}}"><view class="cropper-box data-v-701980e7"><view data-event-opts="{{[['touchstart',[['imgTouchStart',['$event']]]],['touchmove',[['imgMoveing',['$event']]]],['touchend',[['imgMoveEnd',['$event']]]]]}}" class="cropper-box-canvas data-v-701980e7" style="{{'width:'+(imageWidth+'px')+';'+('height:'+(imageHeight+'px')+';')+('transform:'+('scale('+scale+','+scale+') '+'translate3d('+x/scale+'px,'+y/scale+'px,'+'0)'+'rotateZ('+rotate*90+'deg)')+';')}}" catchtouchstart="__e" catchtouchmove="__e" catchtouchend="__e"><image class="uni-image data-v-701980e7 vue-ref" src="{{src}}" alt="cropper-img" mode="scaleToFill" data-ref="cropperImg"></image></view></view><view class="cropper-drag-box cropper-modal cropper-move pointer-events data-v-701980e7"></view><view class="{{['cropper-crop-box','data-v-701980e7',(cropFixed)?'pointer-events':'']}}" style="{{'width:'+(cropW+'px')+';'+('height:'+(cropH+'px')+';')+('transform:'+('translate3d('+cropOffsertX+'px,'+cropOffsertY+'px,'+'0)')+';')}}"><view class="cropper-view-box data-v-701980e7"><image style="{{'width:'+(imageWidth+'px')+';'+('height:'+(imageHeight+'px')+';')+('transform:'+('scale('+scale+','+scale+') '+'translate3d('+(x-cropOffsertX)/scale+'px,'+(y-cropOffsertY)/scale+'px,'+'0)'+'rotateZ('+rotate*90+'deg)')+';')}}" mode="scaleToFill" src="{{src}}" alt="cropper-img" class="data-v-701980e7"></image></view><block wx:if="{{!cropFixed}}"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['cropMoveing',['$event']]]]]}}" class="cropper-face cropper-move data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view></block><view class="crop-line line-w data-v-701980e7"></view><view class="crop-line line-a data-v-701980e7"></view><view class="crop-line line-s data-v-701980e7"></view><view class="crop-line line-d data-v-701980e7"></view><block wx:if="{{!cropFixed}}"><block class="data-v-701980e7"><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','left-top']]]]]}}" class="crop-point point-lt data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','middle-top']]]]]}}" class="crop-point point-mt data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','right-top']]]]]}}" class="crop-point point-rt data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','middle-left']]]]]}}" class="crop-point point-ml data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','middle-right']]]]]}}" class="crop-point point-mr data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','left-bottom']]]]]}}" class="crop-point point-lb data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','middle-bottom']]]]]}}" class="crop-point point-mb data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view><view data-event-opts="{{[['touchstart',[['touchStart',['$event']]]],['touchmove',[['dragMove',['$event','right-bottom']]]]]}}" class="crop-point point-rb data-v-701980e7" catchtouchstart="__e" catchtouchmove="__e"></view></block></block></view><canvas class="cropper-canvas data-v-701980e7" style="{{'width:'+(cropW+'px')+';'+('height:'+(cropH+'px')+';')}}" canvas-id="myCanvas"></canvas><view class="btn-group data-v-701980e7"><view data-event-opts="{{[['tap',[['rotateHandler',['$event']]]]]}}" hidden="{{!(showRotateBtn)}}" class="btn-item rotate-btn data-v-701980e7" bindtap="__e"></view></view><view class="uni-info__ft data-v-701980e7"><view data-event-opts="{{[['tap',[['cancel',['$event']]]]]}}" class="uni-modal__btn uni-modal__btn_default data-v-701980e7" style="color:#9A9ABF;" bindtap="__e">取消</view><view data-event-opts="{{[['tap',[['init',['$event']]]]]}}" class="uni-modal__btn uni-modal__btn_default data-v-701980e7" style="color:#9A9ABF;" bindtap="__e">还原</view><view data-event-opts="{{[['tap',[['confirm',['$event']]]]]}}" class="uni-modal__btn uni-modal__btn_primary data-v-701980e7" style="color:#FFFFFF;" bindtap="__e">下一步</view></view></view>
|