前端识别验证码思路分析

相信很多前端同学对于二维码识别、图像对比等这类高大上的图像识别技术望而生畏,觉得此类识别技术只能通过更加底仓的高级语言才能实现(诸如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等前端新技术的流行,前端不再是功能有限的学科,而是功能强大到只有你想不到木有做不到地步。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏点滴积累

geotrellis使用(九)使用geotrellis进行栅格渲染

目录 前言 图像渲染 总结 参考链接 一、前言        前面几篇文章讲解了如何使用Geotrellis进行数据处理、瓦片生成等,今天主要表一下如何使用Ge...

38150
来自专栏非典型技术宅

Quartz2D进行渲染1. 渲染模式2. even-odd rule:奇偶填充规则3. nonzero winding number rule:非零绕数规则4. 其他会用到的渲染模式5. 混合模式

15130
来自专栏一心无二用,本人只专注于基础图像算法的实现与优化。

用最简单的方式在C#中使用多线程加速耗时的图像处理算法的执行(多核机器)。

     图像处理中,有很多算法由于其内在的复杂性是天然的耗时大户,加之图像本身蕴涵的数据量比一般的对象就大,因此,针对这类算法,执行速度的提在很大程度上依赖于...

1.2K60
来自专栏崔庆才的专栏

滑动宫格验证码都给碰上了?没事儿,看完此文分分钟拿下!

27650
来自专栏hightopo

HTML5的五种客户端离线存储方案

13550
来自专栏阮一峰的网络日志

关于Lorem ipsum

Wikipedia上的解释是,这只是一段用来测试排版效果的占位文字,没有实际的含义。据说,16世纪的时候就有人开始用了。当时的某个印刷工人,从古罗马政治家西塞罗...

18610
来自专栏AI研习社

如何使用 OpenCV 编写基于 Node.js 命令行界面和神经网络模型的图像分类

如何使用 OpenCV 编写基于 Node.js 命令行界面和神经网络模型的图像分类

24650
来自专栏生信宝典

R语言学习 - 热图绘制 (heatmap)

热图绘制 热图是做分析时常用的展示方式,简单、直观、清晰。可以用来显示基因在不同样品中表达的高低、表观修饰水平的高低等。任何一个数值矩阵都可以通过合适的方式用热...

1.5K80
来自专栏GIS讲堂

OpenLayers3基础教程——OL3基本概念

从本节开始,我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助。

16830
来自专栏kalifaの日々

动态规划真的可以为所欲为的(Leetcode 62/63)

看起来不错的运行效率 62题: 动态规划递推公式: 站在当前方块上可选择的路径数量 = 我正下方那个方块可选择的路径数量 + 我右侧那个方块可选择的路径数量; ...

37860

扫码关注云+社区

领取腾讯云代金券