<cover-view class="line" ref="line">
</cover-view>
</cover-view>
</view>
<view class="face-notice">
<view class="face-notice-txt">
拍摄须知
</view>
</view>
</view>
</template>
<script>
import {
pathToBase64
} from 'image-tools';
const animation = uni.requireNativePlugin('animation')
export default {
props: {
time: {
default: 5000,
type: Number
},
},
data() {
return {
top: '-400rpx',
isBottom: false,
timer: null,
lineClass: ['line'],
};
},
destroyed() {
clearInterval(this.timer);
},
mounted() {
// 注意:需要在onReady中 或 onLoad 延时
this.context = uni.createLivePusherContext('livePusher', this);
this.timer = setInterval(() => {
var lineEl = this.$refs.line;
animation.transition(lineEl, {
styles: {
transform: 'translateY(-400rpx)',
},
duration: 0, //ms
})
this.initAnimation()
}, 3000);
this.initAnimation()
setTimeout(() => {
this.startPreview();
});
},
methods: {
initAnimation() {
var lineEl = this.$refs.line;
console.log(1)
animation.transition(lineEl, {
styles: {
transform: 'translateY(780rpx)',
},
duration: 3000, //ms
})
},
// 拍照事件
snapshot() {
this.context.snapshot({
success: res => {
pathToBase64(res.message.tempImagePath).then(base64 => {
console.log('[转换成base64]', base64);
});
}
});
},
// 开启摄像头
startPreview() {
var that = this;
this.context.startPreview({
success: () => {
that.Timer = setTimeout(function() {
// that.snapshot();
}, that.time);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.face-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
background-color: #fff;
.face-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-top {
/* 人脸识别扫描 */
font-size: 42rpx;
font-weight: 500;
color: #333333;
}
&-bottom {
color: #999999;
font-size: 28rpx;
margin-top: 10rpx;
}
}
.livefater {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-top: 10rpx;
margin-bottom: 50rpx;
width: 694rpx;
height: 708rpx;
position: relative;
.livePusher {
width: 694rpx;
height: 708rpx;
}
.face-cover {
width: 694rpx;
height: 708rpx;
// margin-top: -300px;
position: absolute;
.gaiimg {
width: 694rpx;
height: 708rpx;
position: absolute;
}
.line {
width: 694rpx;
height: 400rpx;
background-image: linear-gradient(to bottom, transparent, #096EFF);
position: absolute;
left: 0;
top: -400rpx;
// transition-property: top;
// transition-duration: 1s;
// transition-timing-function: linear;
}
.line-rotate {
transform: rotate(180deg);
}
}
}
.face-notice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-txt {
font-size: 32rpx;
font-weight: 500;
text-align: center;
}
&-img {
width: 580rpx;
height: 144rpx;
}
}
}
</style>
1 个回复
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866
这个属性,只支持微信小程序2.3.0以上,相关文档:https://uniapp.dcloud.net.cn/component/live-pusher.html#live-pusher