uniapp开发的微信小程序——自动抓拍照片功能

最新推荐文章于 2024-08-17 22:39:29 发布

犯困啦

最新推荐文章于 2024-08-17 22:39:29 发布

阅读量1.4k

点赞数 19

分类专栏： uniapp开发微信小程序文章标签： css3 前端前端框架 css javascript html5

本文链接：https://blog.csdn.net/qq_52486463/article/details/136742833

版权

uniapp开发微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章描述了如何在前端模板中集成摄像组件，通过定时抓拍用户照片，然后利用codeDecodeAPI进行二维码识别，判断是否为同一个人，进而跳转到相应页面。

摘要由CSDN通过智能技术生成

前言：在某些情况下当需要隔一定时间抓拍一张照片传给服务器识别

代码：

<div class="camera2" :style="{ 'background-image': `url(${kuankuan})` }"></div>

<view class="check-await"></view>
       </view>
   </view>
</template>

//
   export default {
       data() {
           return {
               kuankuan: this.$store.state.baseUrl + '/images_fjfw/kuankuan.png',
               timer: null
           }
       },
       onLoad(option) {

       },
       onShow() {
           this.changeAvatar()
       },
       mounted() {},
       components: {},
       filters: {},
       watch: {},
       computed: {},
       methods: {
           //关闭抓拍
           stopCamera() {
               clearInterval(this.timer);
               this.timer = null;
           },

           //调用摄像头
           changeAvatar() {
               const cameraContext = uni.createCameraContext();
               this.timer = setInterval(() => {
                   cameraContext.takePhoto({
                       quality: 'high',
                       success: res => {
                           const src = res.tempImagePath
                           console.log(src, 'res.tempImagePath');
                           const base64_dt = uni.getFileSystemManager().readFileSync(src, 'base64')
                           const fileName_dt = src.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
                           const base64_img = 'data:image/' + fileName_dt + ';base64,' + base64_dt

                           codeDecodeAPI({
                               qr_image: base64_img
                           }).then(res => {
                               if(res.code=='2'){
                                   uni.navigateTo({
                                       url: '/pages/nonono/nonono'
                                   })
                                   this.stopCamera()
                               }else if (res.data.consistent == '1') {
                                   console.log('同一个人')
                                   uni.navigateTo({
                                       url: '/pages/okBuy/okBuy?item=' + JSON.stringify(res.data)
                                   })
                                   this.stopCamera()
                               } else if (res.data.consistent == '2') {
                                   console.log('不是同一个人')
                                   uni.navigateTo({
                                       url: '/pages/warn/warn?item=' + JSON.stringify(res.data)
                                   })
                                   this.stopCamera()
                               }
                           }).catch(err => {
                               console.log(err);
                           })

                       },
                       fail: err => {
                           console.error('拍照失败', err);
                       }
                   });
               }, 3000);
           }

       },
   }
</script>

.camera2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-43%, -50%);
width: 449.89rpx;
height: 389.64rpx;
background-size: contain;
background-repeat: no-repeat;
}

   .check-await {
       position: absolute;
       width: 100vw;
       height: 40px;
       filter: blur(0px);
       margin: auto;
       // left: 0;
       // right: 0;
       transform: translateY(-1000px);
       animation: move 2s linear infinite;
   }

   @keyframes move {
       0% {
           transform: translateY(-520px);
           background: linear-gradient(180deg, rgba(84, 181, 105, 0) 0%, #10ff44 100%);
       }

       100% {
           transform: translateY(-45px);
           background: linear-gradient(180deg, rgba(84, 181, 105, 0) 0%, #10ff44 100%);
       }
   }

.check-img {
position: relative;

}

   .check-img .img {
       // width: 320px;
       // height: 320px;
       // border-radius: 5px;
       background: linear-gradient(180deg, #f0f0f2 0%, #d8dce0 100%);
   }

</style>