React h5 前端拍照银行卡识别百度银行卡识别216101

项目中需要用到，调用了百度的银行卡识别接口。刚开始一直报错216101，查询了下是image没正确传过去。研究了一会儿，解决这个问题，百度了下这个错误代码，关于前端的js解决方案几乎没有，有的是其他编程语言的。特此把代码贴出来，希望能帮到有缘人。

我将input隐藏掉是因为原生的input太丑，简单写了个div，点击div代替点击input。

还有关于access_token的请求我这里就不贴代码了，百度api写的很详细。

另外如果单纯想知道银行卡信息，可以用bankcardinfo 这个npm包。非常方便。

import React, { Component } from 'react'；
import qs from 'qs'；
export default class Test extends Component {constructor() {super()this.onchanges = this.onchanges.bind(this);}onchanges(event) {let file = event.target.files[0];if (file) {
//将图片转化为base64格式。let reader = new FileReader();reader.readAsDataURL(file);reader.onload = (event) => {fetch('https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard?access_token="你自己应用的token"', {method: 'POST',headers: {'Content-Type': 'application/x-www-form-urlencoded',},body:  qs.stringify({
//将base64字符串前面这个头'data:image/jpeg;base64'删掉发送给百度。image: event.target.result.replace("data:image/jpeg;base64,","")})}).then(res => res.json()).then(data => {
//打印出识别到的银行卡相关数据console.log(data)}).catch(err => console.log(err));}}}render() {return (<div><input style={{ display: 'none' }} ref={ref => this.images = ref} onChange={this.onchanges} type="file" accept="image/*" capture="camera" /><div onClick={() => this.images.click()} style={{ background: 'blue', width: '100px', height: '100px' }}></div></div>)}
}

React h5 前端拍照银行卡识别百度银行卡识别216101相关推荐

c#批量文字识别,百度文字识别源码
文章目录批量文字识别演示下载地址重要源码一.一键识别按钮二.后台工作三.报告进度,完成任务四.鼠标截图五.文字识别总结批量文字识别演示下载地址 https://download. ...
细粒度识别 | 百度细粒度识别方案
近日,百度发布了用于花卉识别的移动端应用,这种基于全卷积注意力网络的细粒度识别方法在计算和准确度上都有非常强大的优势.在百度主任研发架构师陈凯和资深研发工程师胡翔宇的解释下,本文首先将介绍什么是细粒度 ...
身份证识别,银行卡识别,驾驶证识别,行驶证识别,根据百度文字识别 api 封装,能快速识别身份证信息,银行卡信息,驾驶证信息,行驶证信息,使用非常方便
OCR_identify 项目地址:wenchaosong/OCR_identify 简介:身份证识别,银行卡识别,驾驶证识别,行驶证识别,根据百度文字识别 api 封装,能快速识别身份证信息,银行 ...
Android 集成百度文字识别OCR身份证银行卡驾驶证识别
SDK提供了下列百度AI开放平台RESTful接口的封装.文字识别的服务,可实现一些通用文字,网络图片文字,身份证,银行卡,驾驶证,行驶证,车牌,营业执照,通用票据等的识别需求,简化输入操作. 本篇主 ...
delphi百度文字识别(支持通用文字识别、身份证识别、银行卡识别、驾驶证识别、行驶证识别、车牌识别等功能)
下载链接:https://download.csdn.net/download/liushenglin123/12363729 delphi百度文字识别支持通用文字识别.通用文字识别(高精度版). ...
android集成百度OCR实现身份证、银行卡、营业执照等识别
声明:申请步骤账号这一块比较懒,直接借用了[大千世界小书童] 大神的原图,有想看大神的可以直接去看,地址:www.jianshu.com/p/a9b5d8b22- 第一步:先登录百度智能云 image ...
vue+springboot实现调用本地摄像头拍照上传后端使用百度ocr识别身份证信息
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.前端二.后端总结提示:以下是本篇文章正文内容,下面案例可供参考一.前端 1.首先进入页面打开摄像头 2.点击手动 ...
h5手机拍照+人脸识别
预览地址:https://face-camera.vercel.app 调用手机默认的相机调用  <input type="file&q ...
通用卡证信息高精度识别流程 OCR 文本检测文本识别身份证银行卡
目录如何将一张身份证图像的信息识别出来? 身份证识别点我银行卡识别点我第一步目标检测第二步图像校正如何获取匹配点对坐标求解透视变换矩阵第三步文本检测 CTPN 第四步文本识别 C ...

React h5 前端拍照银行卡识别百度银行卡识别216101

React h5 前端拍照银行卡识别百度银行卡识别216101相关推荐

最新文章

热门文章

React h5 前端 拍照银行卡识别 百度银行卡识别216101

React h5 前端 拍照银行卡识别 百度银行卡识别216101相关推荐

最新文章

热门文章

React h5 前端拍照银行卡识别百度银行卡识别216101

React h5 前端拍照银行卡识别百度银行卡识别216101相关推荐