前端识别验证码思路分析

作者:莫卓颖

相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如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、获取图片的像素信息
 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;
    }
4、导出处理过的图片
context.putImageData(第三步处理过得像素信息,0,0);

二维码识别思路

1、设计一个自动等分切割图片的canvas程序(利用canvas导出原图的二进制数组,然后等分数组后出单个图片的序列库) 2、简单做个爬虫程序,利用步骤1完成的程序到需要识别的网站下载该网站的二维码序列图库 3、手工翻译二维码序列图库对应的真实含义,并建立图片到真实含义的map表。 4、设计自动图片识别程序,导入需要识别的原二维码后,按照1的步骤进行等分,分别拿等分后的图片依次对比步骤2获取的图库,对比出对比度最接近的图片,然后通过步骤三翻译出来的map 表获取对应图片的真实含义

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

后记

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

原文链接:http://ivweb.io/topic/56379021d12b230c26e1a179

相关推荐

【腾讯TMQ】看图测试指南——图像识别在测试中的应用

前端开发框架简介:angular和react

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏机器学习算法与Python学习

值得收臧 | 从零开始搭建带GPU加速的深度学习环境(操作系统、驱动和各种机器学习库)

关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第一 【Python】:排名第三 【算法】:排名第四 原文:https://medium....

3406
来自专栏吉浦迅科技

【阿星的学习笔记(1)】如何在windows安裝Theano +Keras +Tensorflow並使用GPU加速訓練神經網路

今天开始,Lady向各位介绍一个朋友阿星(Ashing)以及他的机器学习读书笔记! ? 阿星也是我们手撕深度学习算法微信群的热心群友!接下来,Lady我也会陆续...

3786
来自专栏潇涧技术专栏

Android Ndk and Opencv Development 3

本节包括下面几个方面的内容: 1.如何实现Static Initialization从而不需要安装OpenCV Manager运行含OpenCV librar...

962
来自专栏数据小魔方

条件格式制作条形数据组图

今天跟大家分享用条件格式制作条形数据组图! ▽▼▽ 记得之前有一期跟大家分享过条件格式图表的制作方法,今天所要讲的案例,方法是一样的,只是通过多个条形图叠加及排...

3406
来自专栏数据派THU

手把手教你安装深度学习软件环境(附代码)

来源:机器之心 本文长度为2800字,建议阅读5分钟。 本文向你解释如何在一台新装的 Ubuntu 机器上安装 Python 和 Nvidia 硬件驱动、各类库...

1908
来自专栏BestSDK

Dynamsoft Camera SDK 6.0发布,轻松捕捉图像和视频流

Dynamsoft Camera SDK提供了Java api,使您可以轻松地从浏览器兼容的USB视频类(UVC)网络摄像头捕捉图像和视频流。 ? 使用基于浏览...

3076
来自专栏非著名程序员

一个类似于进度和打卡进度的自定义view

一个类似于进度和打卡进度的自定义view ---- 如下图: ? 看GIF岂不是更好 ? ---- 这个view在现在的app中挺常见的,基本都是这个套路, -...

1848
来自专栏james大数据架构

创建支持多种屏幕尺寸的Android应用

Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用...

1816
来自专栏施炯的IoT开发专栏

美化Windows Mobile上的自定义数据表

    前段时间做实验室项目,需要以报表的形式将数据展示给用户。首先想到的是visual studio自带的listview,用起来是比较方便,可是看着不美观,...

1726
来自专栏非著名程序员

Android 自定义倒计时 View

2016年08月01日新的一周开始了,一篇自定义倒计时View开启了这周的篇章… ---- 国际惯例,效果图如下; ? 带阴影带指引点的倒计时View,不要被...

1909

扫码关注云+社区