文字识别与提取"/>
HTML5 JavaScript实现图片文字识别与提取
8月底的时候，@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏，作为前端校园招聘的热身，做的相当不错，让我非常喜欢。后来又传出了一条消息，阿里推出了A-star（阿里星）计划，入职阿里的技术培训生，将接受CTO等技术大牛的封闭培训，并被安排到最有挑战的项目中，由技术带头人担任主管。于是那几天关注了一下阿里巴巴的消息，结果看到这么一条微博（）：
此刻，@阿里足球队 可爱的队员们已经出征北上。临走前，后防线的队员们留下一段亲切的问候，送给对手，看@新浪足球队 的前锋们如何破解。@袁甲 @蓝耀栋 #阿里新浪足球世纪大战#
阿里足球队
目测是一段Base64加密过的信息，但无奈的是这段信息是写在图片里的，我想看到解密后的内容难道还一个字一个字地打出来？这么懒这么怕麻烦的我肯定不会这么做啦→_→想到之前有看到过一篇关于HTML5实现验证码识别的文章，于是顿时觉得也应该动手尝试一下，这才是极客的风范嘛！
Demo与截图
先来一个大家最喜欢的Demo地址（识别过程需要一定时间，请耐心等待，识别结果请按F12打开Console控制台查看）：
/
再来张效果图：
HTML5 JavaScript实现图片文字提取
思路
实现一个算法，思路是最重要的，而实现不过是把思想转化为能够运行的代码。
简单地说，要进行文本识别，自然是拿图片的数据与文字的图形数据进行对比，找到与图片数据匹配程度最高的字符。
首先，先确定图片中文本所用的字体、字号、行距等信息，打开PhotoShop，确定了字体为微软雅黑，16像素，行距为24，Base64文字的开始坐标为(8, 161)。
然后，确定要进行匹配的字库，Base64编码中可能出现的字符为26个字母大小写、10个数字、加号、斜杠，但目测在图片中没有斜杠出现，因此字库应该为：
0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+
接着，是确定如何判断字符是否匹配，由于只需要对字型进行匹配，因此颜色值对算法并无用处，因此将其灰度化（详见百度百科），并使用01数组表示，1代表该像素点落在此字符图形上，0反之，而如何确定该某个灰度值在数组中应该表示为0还是1，这个转换公式更是算法中的关键。
最后，将字型的灰度化数据与图片中文字部分的灰度化数据进行对比，将误差最小的字型作为匹配到的字符，然后进行下一个字符的匹配，直到图片中所有字符匹配完毕为止。
递归实现
详细的思路于代码注释中，个人觉得这样结合上下文更为容易理解（注：代码应运行于服务器环境，否则会出现跨域错误，代码行数虽多，但注释就占了大半，有兴趣可以耐心看完，图片资源于上方“写在前面”）。
<!doctype html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>文字识别</title>
</head>
<body><canvas id="canvas" width="880" height="1500"></canvas><script type="text/javascript">var image = new Image();image.onload = recognition;image.src = 'image.jpg';function recognition(){// 开始时间，用于计算耗时var beginTime = new Date().getTime();// 获取画布var canvas = document.getElementById('canvas');// 字符库var letters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+';// 字型数据var letterData = {};// 获取contextvar context = canvas.getContext('2d');// 设置字体、字号
context.font = '16px 微软雅黑';// 设置文字绘制基线为文字顶端
context.textBaseline = 'top';// 一个循环获取字符库对应的字型数据for(var i = 0; i < letters.length; ++i){var letter = letters[i];// 获取字符绘制宽度var width = context.measureText(letter).width;// 绘制白色背景，与图片背景对应
context.fillStyle = '#fff';context.fillRect(0, 0, width, 22);// 绘制文字，以获取字型数据
context.fillStyle = '#000';context.fillText(letter, 0, 0);// 缓存字型灰度化0-1数据
letterData[letter] = {width : width,data : getBinary(context.getImageData(0, 0, width, 22).data)}// 清空该区域以获取下个字符字型数据
context.clearRect(0, 0, width, 22);}// console.log(letterData);// 绘制图片
context.drawImage(this, 0, 0);// 要识别的文字开始坐标var x = beginX = 8;var y = beginY = 161;// 行高var lineHeight = 24;// 递归次数var count = 0;// 结果文本var result = '';// 递归开始
findLetter(beginX, beginY, '');// 递归函数function findLetter(x, y, str){/
更多推荐
HTML5 JavaScript实现图片文字识别与提取
发布评论