index.wxml 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <!--cropper/cropper.wxml-->
  2. <view class="wx-content-info">
  3. <view class='cropper-content'>
  4. <view wx:if="{{showImg}}" class="wx-corpper" style="background:#000;">
  5. <view class="wx-corpper-content" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx;">
  6. <view class="wx-corpper-content-bg">
  7. <!-- <view class="mask" hover-class="none" hover-stop-propagation="false"></view> -->
  8. <image src="{{filePath}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx"></image>
  9. </view>
  10. <view class="wx-corpper-crop-box" bind:touchstart="contentDragStart" bind:touchmove="contentDragMove" bind:touchend="contentTouchEnd" style="left:{{cutL}}rpx;top:{{cutT}}rpx;right:{{cutR}}rpx;bottom:{{cutB}}rpx">
  11. <!-- <view class="wx-corpper-crop-box" bind:touchstart="contentDragStart" bind:touchmove="contentDragMove" bind:touchend="contentTouchEnd" style="width:{{cropperW - cutL - cutR}}rpx;height:{{cropperH - cutT- cutB}}rpx; transform: translateX({{cutL}}rpx) translateY({{cutT}}rpx);"> -->
  12. <view class="wx-cropper-view-box">
  13. <!-- <view class="wx-cropper-view-box-img" style="width:100%;height:100%" hover-class="none" hover-stop-propagation="false">
  14. <image src="{{imageSrc}}" style="width:{{cropperW}}rpx;height:{{cropperH}}rpx; transform: translateX({{-cutL}}rpx) translateY({{-cutT}}rpx);"></image>
  15. </view> -->
  16. <view class="wx-cropper-dashed-h"></view>
  17. <view class="wx-cropper-dashed-v"></view>
  18. <view class="wx-cropper-line-t" data-drag="top" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  19. <view class="wx-cropper-line-r" data-drag="right" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  20. <view class="wx-cropper-line-b" data-drag="bottom" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  21. <view class="wx-cropper-line-l" data-drag="left" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  22. <view class="wx-cropper-point point-t" data-drag="top" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  23. <view class="wx-cropper-point point-tr" data-drag="topTight"></view>
  24. <view class="wx-cropper-point point-r" data-drag="right" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  25. <view class="wx-cropper-point point-rb" data-drag="rightBottom" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  26. <view class="wx-cropper-point point-b" data-drag="bottom" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  27. <view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
  28. <view class="wx-cropper-point point-l" data-drag="left" catch:touchstart="sideDragStart" catch:touchmove="sideDragMove" catch:touchend="sideDragEnd"></view>
  29. <view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class='cropper-config'>
  36. <text class="cropper-cancle" bindtap="close">取消</text>
  37. <text class="cropper-cancle" bindtap="getImage">选择图片</text>
  38. <text class="cropper-save" bindtap="getImageInfo">完成</text>
  39. </view>
  40. <canvas canvas-id="wxCropperCanvas"
  41. style="position:absolute; width:{{qualityWidth}}px;height:{{qualityWidth / innerAspectRadio }}px;top:-9999px;left:-9999px;"></canvas>
  42. </view>