小程序之自定義拍照

小程序之自定義拍照

1. 首先預覽一下效果圖，是否是大家想要的效果圖

2. 實現功能主要用了哪些內容

   camera：系統相機
   cover-view：覆蓋在原生組件之上的文本視圖。

3. 視圖代碼

   wxml

   <view class="waper flex-align-center">
     <view class="noticeTXT">請將身份證正面放入框內</view>
     <camera mode="normal" device-position="back" flash="auto" binderror="error" style="width: 90%; height: 250px;">
       <cover-view class="controls">
           <cover-image class="img" src="/images/border.png" style="width:100%; height:250px;"/>
       </cover-view>
     </camera>
   </view>
   <view class="takePhoto btn bg-brown" bindtap="takePhoto">拍照</view>
   

   wxss

   waper{
       width: 100%;
       height: 60vh;
       align-items: center;
       flex-direction: column;
   }
   .controls {
       position: relative;
       top: 0;
       display: flex;
   }
   
   .noticeTXT {
       text-align: center;
       margin-bottom: 100rpx;
   }
   
   .takePhoto{
       width: 90%;
       margin: 0 auto
   }
   
   .flex-align-center {
     display: flex;
     flex-direction: row;
     justify-content: center;
   }
   
   .btn {
     border-radius: 90rpx;
     padding: 15rpx 25rpx;
     text-align: center;
   }
   
   .bg-brown {
     color: #fff;
     background: linear-gradient(153deg, rgba(225, 164, 70, 1) 0%, rgba(195, 144, 65, 1) 100%);
   }
   

   js

   Page({
     data:{
       img:''
     },
     //拍照
     takePhoto() {
       const ctx = wx.createCameraContext()
       ctx.takePhoto({
         quality: 'high',
         success: (res) => {
         	//res.tempImagePath爲拍取的相片
         	console.log('相片路徑',res.tempImagePath)
         	this.setData({img:res.tempImagePath})
         }
       })
     }
   })