react电子签名

react电子签名+百度手写文字识别接口

开发工具：vscode
使用组件：react-signature-canvas
使用接口：https://ai.baidu.com/tech/ocr_others/handwriting

1.添加组件

npm install react-signature-canvas

2.查看百度手写文字识别接口

第一步：注册百度账号
第二步：百度开放平台-开放能力-文字识别-手写文字识别

第三步：获取百度access_token
https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHlA4Fq5eR3LT0vuXV4&client_secret=0rDSjzQ20XUj5itV6WRtznPQSzr5pVw2&

第四步：使用百度手写文字识别接口
https://aip.baidubce.com/rest/2.0/ocr/v1/handwriting

3.效果图

4.源代码

import React, { Component } from "react";
import SignatureCanvas from "react-signature-canvas";
import axios from "axios"

class ElectronicSignature extends Component {
    constructor(props){
        super(props);
        this.state = {
            trimmedDataURL:"",
            ocrStr:""
        }
        this.clear = this.clear.bind(this);
        this.save = this.save.bind(this);
        this.getWord = this.getWord.bind(this);
    }

    componentDidMount(){
        const box = document.getElementById("canvas");
    }

    sigCanvas = {clear:()=>{},toDataURL:(param)=>{return ""}};
    clear(){
        this.sigCanvas.clear();
        this.setState({trimmedDataURL: "", ocrStr:""});
    }
    save(){
        let _this = this;
        console.log(this.sigCanvas);
        //let trimmedCanvas = this.sigCanvas.getTrimmedCanvas();
        this.setState({trimmedDataURL: this.sigCanvas.toDataURL("image/png")});
        //
        let imageBase = this.sigCanvas.toDataURL("image/png");
        //
        let baidu_access_token_str = localStorage.getItem("baidu_access_token");
        if(baidu_access_token_str == null || baidu_access_token_str == undefined || baidu_access_token_str == ""){
            // 注意 client_id 和 client_secret 参数是申请的百度账户提供的
            axios({
                method: "GET",
                url: "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=123&client_secret=123"
            })
            .then(function (response) {
                console.log(response);
                localStorage.setItem("baidu_access_token",response.data.access_token);
                _this.getWord(imageBase,response.data.access_token);
            })
            .catch(function (error) {
                console.log(error);
            });
        }else{
            this.getWord(imageBase,baidu_access_token_str); 
        }
    }

    getWord(imageBase, access_token_str){
        let _this = this;
        let param = new URLSearchParams();
        let ttArray = imageBase.split(",");
        let tt = ttArray[1];
        let ii = tt.replaceAll("\r\n","");
        let kk = ii.replaceAll("\\+","%2B");
        param.append("image", kk);
        // param.append("url", "https://tesseract.projectnaptha.com/img/eng_bw.png");
        axios({
            headers: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            method: "POST",
            url: "https://aip.baidubce.com/rest/2.0/ocr/v1/handwriting?access_token=" + access_token_str,
            data: param
        })
        .then(function (response) {
            let ddStr = "";
            for (let i = 0; i < response.data.words_result.length; i++) {
                ddStr += response.data.words_result[i].words + "\r\n";
            }
            _this.setState({ocrStr:ddStr});
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    render() {
        let {trimmedDataURL} = this.state;
        return (
            <div style={{"width": "100%","height": "100%"}}>
                <div id="canvas" style={{"width": "100%","textAlign": "center","border": "1px solid #999999","marginBottom": "10px","overflowX":"none"}}>
                    <SignatureCanvas penColor="green" canvasProps={{"width": "800", "height": "200"}} ref = {(ref) => { this.sigCanvas = ref }}/>
                </div>
                <div>
                    <button style={{"width": "100%","height": "30px"}} onClick={this.clear}>
                        重置
                    </button>
                    <button style={{"width": "100%","height": "30px"}} onClick={this.save}>
                        保存
                    </button>
                </div>
                <div>
                    {trimmedDataURL ? <img style={{"width": "100%","height": "300px","backgroundColor": "#ECF5F6"}} src={trimmedDataURL} /> : <div style={{"width": "100%","height": "300px","backgroundColor": "#ECF5F6"}} ></div>}
                </div>
                <div>
                    <p>签名结果：</p>
                    <h1>{this.state.ocrStr}</h1>
                </div>
            </div>
        )
    }
}

export default ElectronicSignature;