头像上传裁剪
This commit is contained in:
haomingming
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<view class='image-cropper' catchtouchmove='_preventTouchMove' wx:if="{{show_cropper}}">
|
||||
<view class='main' id="main" bindtouchend="_cutTouchEnd" bindtouchstart="_cutTouchStart" bindtouchmove="_cutTouchMove">
|
||||
<view class='content'>
|
||||
<view class='content_top bg_gray {{_flag_bright?"":"bg_black"}}' style="height:{{cut_top}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
|
||||
<view class='content_middle' style="height:{{height}}px;">
|
||||
<view class='content_middle_left bg_gray {{_flag_bright?"":"bg_black"}}' style="width:{{cut_left}}px;transition-property:{{_cut_animation?'':'background'}}"></view>
|
||||
<view class='content_middle_middle' style="width:{{width}}px;height:{{height}}px;transition-duration: .3s;transition-property:{{_cut_animation?'':'background'}};">
|
||||
<view class="border border-top-left"></view>
|
||||
<view class="border border-top-right"></view>
|
||||
<view class="border border-right-top"></view>
|
||||
<view class="border border-right-bottom"></view>
|
||||
<view class="border border-bottom-right"></view>
|
||||
<view class="border border-bottom-left"></view>
|
||||
<view class="border border-left-bottom"></view>
|
||||
<view class="border border-left-top"></view>
|
||||
</view>
|
||||
<view class='content_middle_right bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
|
||||
</view>
|
||||
<view class='content_bottom bg_gray {{_flag_bright?"":"bg_black"}}' style="transition-property:{{_cut_animation?'':'background'}}"></view>
|
||||
</view>
|
||||
<image bindload="imageLoad" bindtouchstart="_start" bindtouchmove="_move" bindtouchend="_end" style="width:{{img_width ? img_width + 'px' : 'auto'}};height:{{img_height ? img_height + 'px' : 'auto'}};transform:translate3d({{_img_left-img_width/2}}px,{{_img_top-img_height/2}}px,0) scale({{scale}}) rotate({{angle}}deg);transition-duration:{{_cut_animation?.4:0}}s;" class='img' src='{{imgSrc}}'></image>
|
||||
</view>
|
||||
<canvas canvas-id='image-cropper' disable-scroll="true" style="width:{{_canvas_width * export_scale}}px;height:{{_canvas_height * export_scale}}px;left:{{canvas_left}}px;top:{{canvas_top}}px" class='image-cropper-canvas'></canvas>
|
||||
<view class="btn_box">
|
||||
<view class="btn">
|
||||
<button bindtap="cnacle" class="btn_cancle">取消</button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<button bindtap="_click" class="btn_confirm">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,144 @@
|
||||
.image-cropper{
|
||||
background:rgba(14, 13, 13,.8);
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
z-index: 2;
|
||||
}
|
||||
.image-cropper .main{
|
||||
position: absolute;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.image-cropper .content{
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
display: flex;
|
||||
flex-direction:column;
|
||||
pointer-events:none;
|
||||
}
|
||||
.image-cropper .bg_black{
|
||||
background: rgba(0, 0, 0, 0.8)!important;
|
||||
}
|
||||
.image-cropper .bg_gray{
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
transition-duration: .35s;
|
||||
}
|
||||
.image-cropper .content>.content_top{
|
||||
pointer-events:none;
|
||||
}
|
||||
.image-cropper .content>.content_middle{
|
||||
display: flex;
|
||||
height: 200px;
|
||||
width:100%;
|
||||
}
|
||||
.image-cropper .content_middle_middle{
|
||||
width:200px;
|
||||
box-sizing:border-box;
|
||||
position: relative;
|
||||
transition-duration: .3s;
|
||||
}
|
||||
.image-cropper .content_middle_right{
|
||||
flex: auto;
|
||||
}
|
||||
.image-cropper .content>.content_bottom{
|
||||
flex: auto;
|
||||
}
|
||||
.image-cropper .img{
|
||||
z-index: 2;
|
||||
top:0;
|
||||
left:0;
|
||||
position: absolute;
|
||||
border:none;
|
||||
width:100%;
|
||||
backface-visibility: hidden;
|
||||
transform-origin:center;
|
||||
}
|
||||
.image-cropper .image-cropper-canvas{
|
||||
position: fixed;
|
||||
background: white;
|
||||
width:150px;
|
||||
height:150px;
|
||||
z-index: 10;
|
||||
top:-200%;
|
||||
pointer-events:none;
|
||||
}
|
||||
.image-cropper .border{
|
||||
background: white;
|
||||
pointer-events:auto;
|
||||
position:absolute;
|
||||
}
|
||||
.image-cropper .border-top-left{
|
||||
left:-2.5px;
|
||||
top:-2.5px;
|
||||
height:2.5px;
|
||||
width:33rpx;
|
||||
}
|
||||
.image-cropper .border-top-right{
|
||||
right:-2.5px;
|
||||
top:-2.5px;
|
||||
height:2.5px;
|
||||
width:33rpx;
|
||||
}
|
||||
.image-cropper .border-right-top{
|
||||
top:-1px;
|
||||
width:2.5px;
|
||||
height:30rpx;
|
||||
right:-2.5px;
|
||||
}
|
||||
.image-cropper .border-right-bottom{
|
||||
width:2.5px;
|
||||
height:30rpx;
|
||||
right:-2.5px;
|
||||
bottom:-1px;
|
||||
}
|
||||
.image-cropper .border-bottom-left{
|
||||
height:2.5px;
|
||||
width:33rpx;
|
||||
bottom:-2.5px;
|
||||
left:-2.5px;
|
||||
}
|
||||
.image-cropper .border-bottom-right{
|
||||
height:2.5px;
|
||||
width:33rpx;
|
||||
bottom:-2.5px;
|
||||
right:-2.5px;
|
||||
}
|
||||
.image-cropper .border-left-top{
|
||||
top:-1px;
|
||||
width:2.5px;
|
||||
height:30rpx;
|
||||
left:-2.5px;
|
||||
}
|
||||
.image-cropper .border-left-bottom{
|
||||
width:2.5px;
|
||||
height:30rpx;
|
||||
left:-2.5px;
|
||||
bottom:-1px;
|
||||
}
|
||||
.btn_box{
|
||||
z-index: 9;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
bottom: 0rpx;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
}
|
||||
.btn{
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin: 60rpx 20rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.btn_cancle{
|
||||
/* width: 100rpx; */
|
||||
}
|
||||
.btn_confirm{
|
||||
background-color: #3CC7C0;
|
||||
color: #fff;
|
||||
}
|
||||
Reference in New Issue
Block a user