引入react-webcam实现拍照功能

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Webcam from 'react-webcam';//引入第三方拍照组件

class Test extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            photo: null,//用于获取照片
        };
        this.webcamRef = React.createRef();//获取其实际的DOM节点,调用其原生方法
    }
    //拍照功能--获取到的图片base64编码还要解码转地址!!
    takeSnapshot = () => {
        //操作DOM元素调用原生的方法获取当前画面的base64编码
        const base64Image = this.webcamRef.current.getScreenshot();
        // console.log(base64Image)
        //Base64 编码的图片数据
        const byteCharacters = base64Image.split(',')[1];
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], {type: 'image/jpeg'});
        const imageUrl = URL.createObjectURL(blob);
        console.log(imageUrl)
        // 将 imageUrl 显示在页面上或者上传到服务器
        this.setState({ photo: imageUrl });
    };

    render() {
        const { photo } = this.state;
        const imgSrc = photo ? photo : '';

        return (
            <div className={'page-body'}>
                <div className={'content-body'}>
                    <div>
                        {/*使用第三方拍照组件*/}
                        <Webcam
                            ref={this.webcamRef}
                            audio={false}
                            height={350}
                            width={350}
                            screenshotFormat="image/jpeg"
                        />
                        {imgSrc && <img src={imgSrc} alt="Snapshot" />}
                        <button className='miniBtn' onClick={this.takeSnapshot}>
                            拍照
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect()(Test);

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值