| 1234567891011121314 |
- <view class="container">
- <!-- 剪裁框与初始图片，剪裁框监听用户手势，获取移动缩放旋转值，images通过css样式显示变化 -->
- <view class="img" style="width:{{ width }}px; height:{{height}}px" catchtouchstart="touchstartCallback" catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback" >
- <image style="transform: translate({{stv.offsetX}}px, {{stv.offsetY}}px) scale({{stv.scale}}) rotate({{ stv.rotate }}deg);width:{{originImg.width}}px; height: {{originImg.height}}px" src="{{ originImg.url }}"></image>
- </view>
- <view class='footer'>
- <view bindtap='uploadTap'>选择</view>
- <view bindtap='cropperImg'>上传</view>
- <view bindtap='back'>返回</view>
- </view>
- <!-- canvas长宽设为初始图片设置的长款的两倍，使剪裁得到的图片更清晰，也不至于过大 -->
- <canvas class='imgcrop' style="width:{{ width * 2 }}px;height:{{ height * 2}}px;" canvas-id='imgcrop'></canvas>
- </view>
|
