前端识别验证码思路分析

作者:莫卓颖

相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如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 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

parklines迷你图系列1——Scales

按照之前的计划,今天开始按照sparklines插件的图表分类标准开始跟大家分享详细的做法。 按照该插件在excel菜单中的顺序,先来看测量尺度(Scales)...

30660
来自专栏Python中文社区

利用人工智能实现小程序自动答题

之前有看到有人用python实现自动运行微信小程序《跳一跳》,后来看到别人用hash码实现《加减大师》的自动答题领取娃娃,最近一直在研究深度学习,为啥不用机器学...

1.3K20
来自专栏CDA数据分析师

利用Python绘图和可视化(长文慎入)

Python有许多可视化工具,但是我主要讲解matplotlib(http://matplotlib.sourceforge.net)。此外,还可以利用诸如d3...

1.7K70
来自专栏Spark学习技巧

第2篇:数据库关系建模

第二篇:数据库关系建模 前言 ER建模环节完成后,需求就被描述成了ER图。之后,便可根据这个ER图设计相应的关系表了。 但从ER图到具体关系表的建立还需要经过两...

35260
来自专栏ATYUN订阅号

深度学习图像识别项目(下):如何将训练好的Kreas模型布置到手机中

今天,我们将这种经过训练的Keras模型部署到iPhone手机或者说iOS的APP中,在这里我们使用CoreML,这 是一种易于使用的Apple应用程序机器的学...

28630
来自专栏人工智能头条

一边吃瓜看球,一边完成AI应用实践——手写体识别入门

22820
来自专栏PPV课数据科学社区

《Kaggle项目实战》 泰坦尼克:从R开始数据挖掘(一)

摘要: 你是否为研究数据挖掘预测问题而感到兴奋?那么如何开始呢,本案例选自Kaggle上的数据竞赛的一个数据竞赛项目《泰坦尼克:灾难中的机器学习》,案例涉及一...

36560
来自专栏极客猴

使用 Python 生成二维码

新时代,人们有人信新的追求,自然而然会有新发明的诞生。去年,在“一带一路”国际合作高峰论坛举行期间, 20 国青年投票选出中国的“新四大发明”:高铁、扫码支付、...

31500
来自专栏机器之心

业界 | 谷歌发布TensorFlow 1.3.0版本,新加多个分类器、回归器

31840
来自专栏新智元

【TensorFlow1.2.0版发布】14大新功能,增加Intel MKL集成

【新智元导读】TensorFlow 今天发布最新版 1.2.0,公布了14大最新功能。新智元带来最新介绍,包括 API 的重要变化、contrib API的变化...

35590

扫码关注云+社区

领取腾讯云代金券