更多腾讯海量技术文章,请关注云加社区:https://cloud.tencent.com/developer
作者:莫卓颖
相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如c等),本文试图从前端的角度出发介绍如何通过canvas来进行简单的图像识别。
canvas是什么
canvas是HTML5中的新元素,你可以使用javascript用它来绘制图形、图标、以及其它任何视觉性图像
canvas图片处理运用
对于canvas来说,主要是两个方法对图片处理比较重要,一个是通过html5 canvas的 getImageData 方法获取图片的像素信息,可以很方便的通过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息,可以修改像素信息后通过另外一个重要的方法putImageData导出处理后的图片。
1、获取canvas调用
var c = document.createElement('canvas');
context = c.getContext('2d');
2、获取导入图像信息
var hiddenImage = new Image();
hiddenImage.src=图片地址
context .drawImage(hiddenImage, 0, 0, width, height);
hiddenImage .onload=function(){
context.putImageData(hiddenImage, 0, 0);
}
3、获取图片的像素信息
4、导出处理过的图片
context.putImageData(第三步处理过得像素信息,0,0);
二维码识别思路
1、设计一个自动等分切割图片的canvas程序(利用canvas导出原图的二进制数组,然后等分数组后出单个图片的序列库)
2、简单做个爬虫程序,利用步骤1完成的程序到需要识别的网站下载该网站的二维码序列图库
3、手工翻译二维码序列图库对应的真实含义,并建立图片到真实含义的map表。
4、设计自动图片识别程序,导入需要识别的原二维码后,按照1的步骤进行等分,分别拿等分后的图片依次对比步骤2获取的图库,对比出对比度最接近的图片,然后通过步骤三翻译出来的map
表获取对应图片的真实含义
好了,授人以鱼不如授人以渔,通过前端进行做坏事的方法告诉你了,如何发扬光大就看你的灵活运用。
后记
相信在很多人眼中, 前端仅仅是一门简单的处理网页交互、样式门面学科。随着h5、node等前端新技术的流行,前端不再是功能有限的学科,而是功能强大到只有你想不到木有做不到地步。
领取专属 10元无门槛券
私享最新 技术干货