腾讯 IVWEB 团队：前端识别验证码思路分析

时间 2019-11-16

原文原文链接

腾讯云技术社区-掘金主页持续为你们呈现云计算技术文章，欢迎你们关注！javascript

做者：莫卓颖html

相信不少前端同窗对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏，以为此类识别技术只能经过更加底仓的高级语言才能实现（诸如c等），本文试图从前端的角度出发介绍如何经过canvas来进行简单的图像识别。前端

canvas是什么

canvas是HTML5中的新元素，你可使用javascript用它来绘制图形、图标、以及其它任何视觉性图像复制代码

canvas图片处理运用

对于canvas来讲，主要是两个方法对图片处理比较重要，一个是经过html5 canvas的 getImageData 方法获取图片的像素信息，能够很方便的经过方法导入到把网络图片或者本地的图片导入至canvas中并获取图片的像素信息，能够修改像素信息后经过另一个重要的方法putImageData导出处理后的图片。html5

一、获取canvas调用

var c = document.createElement('canvas');
    context = c.getContext('2d');复制代码

二、获取导入图像信息

var hiddenImage = new Image();
    hiddenImage.src=图片地址
     context .drawImage(hiddenImage, 0, 0, width, height);
       hiddenImage .onload=function(){
        context.putImageData(hiddenImage, 0, 0);
    }复制代码

三、获取图片的像素信息

var imageData = context.getImageData(0, 0, w, h);
//注意这个获取的是数组，注意每1个像素由数组的4个元素组成，四个元素分别代码四个通道r/g/b/a的值
for(var j=0;j<hiddenImage.height;j+=1){
    for(var i=0;i<hiddenImage.width;i+=1){
 //注意这里获取图片信息后能够进行定制化处理
            offset=4*(hiddenImage.width*j+i);
            var red = sourceImageData[offset];
            var green = sourceImageData[offset + 1];
            var blue = sourceImageData[offset + 2];
            var brightness = getBrightness(red,green,blue);

    }
  }
  function getBrightness(r,g,b){
        return 0.3*r + 0.59*g + 0.11*b;
    }复制代码

四、导出处理过的图片

context.putImageData(第三步处理过得像素信息,0,0);复制代码

二维码识别思路

一、设计一个自动等分切割图片的canvas
程序（利用canvas导出原图的二进制数组，而后等分数组后出单个图片的序列库）

二、简单作个爬虫程序，利用步骤1完成的程序到须要识别的网站下载该网站的二维码序列图库

三、手工翻译二维码序列图库对应的真实含义，并创建图片到真实含义的map表。

四、设计自动图片识别程序，导入须要识别的原二维码后，按照1的步骤进行等分，分别拿等分后的图片依次对比步骤2获取的图库，对比出对比度最接近的图片，而后经过步骤三翻译出来的map
表获取对应图片的真实含义java

好了，授人以鱼不如授人以渔，经过前端进行作坏事的方法告诉你了，如何发扬光大就看你的灵活运用。node

后记

相信在不少人眼中，前端仅仅是一门简单的处理网页交互、样式门面学科。随着h五、node等前端新技术的流行，前端再也不是功能有限的学科，而是功能强大到只有你想不到木有作不到地步。react

原文连接：ivweb.io/topic/56379…web

此文已由做者受权腾讯云技术社区发布，转载请注明文章出处
原文连接：www.qcloud.com/community/a…
获取更多腾讯海量技术实践干货，欢迎你们前往腾讯云技术社区数组