微信小程序取景框拍照(Taro实现)

js代码

import Taro, { Config, useState } from '@tarojs/taro';
import {View, Camera, Image} from '@tarojs/components';
import './style.less';

const header = require('./image/header.png');
const bnt = require('./image/bnt.png');
const confirm = require('./image/confirm.png');
const cancel = require('./image/cancel.png');

const Index = () => {
  const [image, setImage] = useState('');

  function takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log('res', res.tempImagePath,res)
        setImage(res.tempImagePath);
      },
    })
  }

  function ok() {
    
  }

  return (
    <View className="container">
      <View className="top" />
      <View className="center">
        <View className="left" />
        {!image && (
          <Camera mode="normal" className="camera" />
        )}
        {image && (
          <Image className="camera" src={image} mode="aspectFit"  />
        )}
        <View className="left" />
      </View>
      <View className="bottom" />
      <Image className="img" src={header} mode="aspectFit"  />
      {!image && (
        <Image className="bnt" src={bnt} mode="aspectFit" onClick={takePhoto} />
      )}
      {image && (
        <Image className="confirm" src={confirm} mode="aspectFit" onClick={ok} />
      )}
      {image && (
        <Image className="cancel" src={cancel} mode="aspectFit" onClick={() => setImage('')} />
      )}
      <View className="title">请拍摄身份证正面</View>
    </View>
  );
};

Index.config = {
  navigationBarTitleText: '上传身份证',
  navigationBarBackgroundColor: '#000000',
} as Config;

export default Index;

样式

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.top{
  width: 100%;
  height: 6.63vh;
  background-color: #000000;
}
.center{
  width: 100%;
  height: 63.68vh;
  display: flex;
  flex-direction: row;
}
.bottom{
  width: 100%;
  height: 29.68vh;
  background-color: #000000;
}
.left{
  width: 17.86vw;
  height: 100%;
  background-color: #000000;
}
.camera{
  width: 100%;
  height: 100%;
}
.title{
  width: 23.88vh;
  height: 38rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #FFFFFF;
  transform: rotate(90deg);
  position: fixed;
  top: 32vh;
  left: 73vw;
}
.img {
  width: 35.46vw;
  height: 22.55vh;
  position: fixed;
  bottom: 35.67vh;
  left: 42.33vw;
}
.bnt {
  width: 17.6vw;
  height: 10.94vh;
  position: fixed;
  bottom: 8.29vh;
  left: 40vw;
}
.confirm {
  width: 17.6vw;
  height: 10.94vh;
  position: fixed;
  bottom: 8.29vh;
  right: 13.3vw;
}
.cancel {
  width: 17.6vw;
  height: 10.94vh;
  position: fixed;
  bottom: 8.29vh;
  left: 13.3vw;
}

图片

bnt.png cancel.png confirm.png header.png

效果

20220509110837.jpg 20220509110901.jpg