JavaScript通过百度OCR实现图像文字识别及常见错误解释

-前言-

在日常工作难免会遇到将美术图中的文字提取标识出来，接下来我们就讲一讲OCR及通过百度OCR识别我们自己的美术图中的资源。

-正文-

OCR是图像文字识别技术，应用场景非常的广，百度OCR技术说是基于人工智能的OCR，普通场景识别精度高达98%。这里我们不谈OCR相关技术，只是实现一下如何使用百度OCR。

账号注册

首先我们需要有一个百度智能云的账号，并且创建一个文字识别的应用。这里就不多赘述，直接创建一个免费账号即可，对于个人开发使用免费账户完全够用。接着我们会拿到一个API Key及Secret Key，这是我们在请求发送的时候获取token的参数。

上传文件并识别

上传文件我继续沿用了之前分解图集项目的框架，该功能也是在那个项目基础上扩展的。

/**
 * 百度图像文字识别
 */
class BaiduOCR{

	constructor(){
		/**
		 * token
		 */
		this.token;
		/**
		 * string 圖像數據
		 */
		this.image;
	}

	/**
	 * 将文件写入Canvas
	 */
	findFileWords(file) {
		var $this = this;
		createImageBitmap(file).then((data) => {
			var canvas = document.createElement("canvas");
			canvas.width = data.width;
			canvas.height = data.height;
			var ctx = canvas.getContext("2d");
			ctx.drawImage(data,0,0);
			var base = canvas.toDataURL("image/png", 1);
			$this._doReqOCR(base);
		});
	}

	/**
	 * 请求识别
	 * @param {string} image Base64图形数据
	 */
	_doReqOCR(image){
		this.image = image;
		if(this.token){
			this._reqOCR();
		}else{
			this._reqToken();
		}
	}

	/**
	 * 请求识别图像内容
	 */
	_reqOCR(){
		var http = new Tool.HttpRequest();
		var url = "https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=" + this.token;
		var img = "image="+encodeURIComponent(this.image.split(',')[1]);
		http.once("complete",this,(data)=>{
			console.log(data);
		});
		http.send(url,img,"post","text",['content-type','application/x-www-form-urlencoded']);
	}

	/**
	 * 请求token
	 */
	_reqToken(){
		var tokenHttp = new Tool.HttpRequest();
		var url = `https://aip.baidubce.com/oauth/2.0/token?
		grant_type=client_credentials&
		client_id=【API Key】&
		client_secret=【Secret Key】&`;
		tokenHttp.once("complete",this,(data)=>{
			var jd = JSON.parse(data);
			this.token = jd.access_token;
			this._reqOCR();
		});
		tokenHttp.once("error",this,()=>{
			console.warn("ERROR ON HTTP POST");
		});
		tokenHttp.send(url,null,"post");
	}
}

上面是该功能的完整代码，实现图像识别的功能，我们还是首先通过传到浏览器的图片文件转换成Canvas上的图像，再通过Canvas的API去获取像素数据。百度OCR需要的图像数据是Base64编码的图像数据，正好我们的Canvas方式toDataURL就是转换为Base64后的编码数据。

在获取了我们的编码数据base之后开始发起识别请求，首先通过API key及Secret Key获取token，再通过token获取图像内文字数据。

开发问题

HTTPRequest

上面的Tool.HttpRequest是我封装了XMLHttpRequest，直接使用XMLHttpRequest进行请求即可。下面以_reqOCR方法为例请求图像数据修改为

/**
 * 请求识别图像内容
 */
_reqOCR(){
	var http = new XMLHttpRequest();						
	var url = "https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=" + this.token;
	var img = "image="+encodeURIComponent(this.image.split(',')[1]);		
	http.open("post",url);	
	http.setRequestHeader('content-type','application/x-www-form-urlencoded');			
	http.send(img);
	http.onload = function (e) {
		console.log(e.target.response);
	};
}

另外Http请求要使用post方法

216101 param image not exist

报这个错误是你没有在body内发送image数据，注意http参数形式以字符串拼接形式发送。

var data = "image=" + 数据内容

216201 image format error

这个错误是图形数据在百度那边解析错误，说明我们没有按照百度那边的解析规则去传image数据。我们获取得到的Base64字符串数据需要做以下两部更改：

1. 去掉Base64数据头（data:image/png;base64,）
2. 将Base64去掉数据头的数据进行URL编码，将数据内容转义

第一步我们通过字符串API 取“，”后字符串内容，第二步通过encodeURIComponent转换即可