crm_wx-master/miniprogram_npm/lin-ui/image-clipper/index.wxml

<view wx:if="{{show}}">
    <view class="container l-class" catchtouchmove="doNothing" style="z-index: {{zIndex}};">
        
        <view class="clip-wrapper" bind:touchstart="clipTouchStart" bind:touchmove="clipTouchMove" bind:touchend="clipTouchEnd">
            
            
            
            
           
        </view>
        
        <image class="cropper-image" binderror="imageLoad" bindload="imageLoad" bind:touchstart="imageTouchStart" bind:touchmove="imageTouchMove" bind:touchend="imageTouchEnd" src="{{imageUrl}}" mode="widthFix" wx:if="{{imageUrl}}" style="width: {{imageWidth ? imageWidth + 'px' : 'auto'}};height: {{imageHeight ? imageHeight + 'px' : 'auto'}};transform: translate3d({{imageLeft - imageWidth / 2}}px, {{imageTop - imageHeight / 2}}px,0) scale({{scale}}) rotate({{angle}}deg); transition-duration: {{cutAnimation ? 0.35 : 0}}s;"/>
        
        <canvas canvas-id="image-clipper" id="image-clipper" :disable-scroll="true" style="width: {{CANVAS_WIDTH * scaleRatio}}px; height:{{CANVAS_HEIGHT * scaleRatio}}px;" class="clipper-canvas"></canvas>
        
        <view class="footer-tools">
            <view class="tools-icon">
                <image src="{{checkImageIcon}}" mut-bind:tap="uploadImage" wx:if="{{checkImage}}" class="tools-icon-image"/>
                <image src="{{rotateAlongIcon}}" mut-bind:tap="rotate" data-type="along" wx:if="{{rotateAlong}}" class="tools-icon-image"/>
                <image src="{{rotateInverseIcon}}" mut-bind:tap="rotate" data-type="inverse" wx:if="{{rotateInverse}}" class="tools-icon-image"/>
                <image src="{{sureIcon}}" mut-bind:tap="getImageData" wx:if="{{sure}}" class="tools-icon-image"/>
                <image src="{{closeIcon}}" mut-bind:tap="close" wx:if="{{close}}" class="tools-icon-image"/>
            </view>
            <slot></slot>
        </view>
    </view>
</view>