前端识别验证码思路分析

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

相关文章

来自专栏数据小魔方

sparklines迷你图系列7——Comparision(+/-Variance)。

今天跟大家分享sparklines迷你图系列的第七篇——Comparision(+/-Variance)。 该图表用于表现指标增长率波动情况,波动范围-100%...

2415
来自专栏HT

基于HTML5和WebGL的3D网络拓扑结构图

现在,3D模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型;电影行业将它们用于活动的人物、物体以及现实电影;视频游戏产业将它们作为计算机与视频游...

2525
来自专栏个人分享

PageRank算法

PageRank,网页排名,又称网页级别,传说中是PageRank算法拯救了谷歌,它是根据页面之间的超链接计算的技术,作为网页排名的要素之一。它通过网络浩瀚的超...

1082
来自专栏CDA数据分析师

这么漂亮的Excel图表,年终总结就用它了!

作者 罂粟姐姐 最近在某份研究报告中见到了这样一个图表: 看到它的瞬间,有一种看见美女惊为天人的感觉。很精致,很别致,让整个报告显得特别上档次。 所以,今天...

1799
来自专栏数据小魔方

sparklines迷你图系列17——Distribution(Stripes)

今天跟大家分享sparklines迷你图系列16——Distribution(Stripes)。 Stripe图是类似于条形码那样的呈现连续性数据分布状态的一种...

3198
来自专栏腾讯社交用户体验设计

如何让你的动画更自然-运动曲线探究与应用

1013
来自专栏hightopo

基于HTML5和WebGL的3D网络拓扑结构图

1523
来自专栏数据小魔方

帕累托图(Pareto Chart)

今天要跟大家分享的图表是帕累托图! ▽▼▽ 这种图表类似于之前曾分享过的直方图,但是又比直方图所能展现的数据信息更多,由一个降序排列的柱形图和一个升序排列的带数...

3375
来自专栏程序生活

PageRank算法原理与实现

假设一个由4个网页组成的群体:A,B,C和D。如果所有页面都只链接至A,那么A的PR(PageRank)值将是B,C及D的Pagerank总和。

823
来自专栏周明礼的专栏

Threejs 快速入门

在什么都是3D,看电影3D,打游戏3D,估计3D打车,很快就会面世。那么作为前端开发的标准语言,JS和3D能不能也搞出点大新闻呢?刚好最近在做一个活动时,就遇到...

2.6K1

扫码关注云+社区