前端识别验证码思路分析

作者:莫卓颖

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

相关文章

来自专栏小石不识月

如何将机器学习模型转移到产品中

针对于特定问题(例如自然语言处理,即 NLP,或图像识别)的深度学习模型开发、训练和调参,需要耗费时间与资源。这通常还包括使用功能强大的处理器来训练大型数据集上...

2622
来自专栏海天一树

用Tensorflow实现卷积神经网络CNN

一、数据准备 实验数据使用MNIST数据集。 MNIST 数据集已经是一个被”嚼烂”了的数据集, 很多教程都会对它”下手”, 几乎成为一个 “典范”。 在很多t...

4798
来自专栏Python小屋

Python使用wordcloud+pillow基于给定图像制作词云

大致思路:Python扩展库wordcloud可以用来制作词云,而pillow库提供了图像处理功能,代码结合二者创建了词云头像,其中把给定的图像作为参考,只保留...

2688
来自专栏ATYUN订阅号

TensorFlow:使用Cloud TPU在30分钟内训练出实时移动对象检测器

是否能够更快地训练和提供对象检测模型?我们已经听到了这种的反馈,在今天我们很高兴地宣布支持训练Cloud TPU上的对象检测模型,模型量化以及并添加了包括Ret...

1525
来自专栏人工智能LeadAI

OpenCV人脸识别之二:模型训练

本系列人脸识别文章用的是opencv2,最新版的opencv3.2的代码请参考文章: OpenCV之识别自己的脸——C++源码放送(请在上一篇文章末尾查看) 在...

7836
来自专栏专知

【前沿】Pytorch开源VQA神经网络模块,让你快速完成看图问答

【导读】近期,NLP专家Harsh Trivedi使用Pytorch实现了一个视觉问答的神经模块网络,想法是参考CVPR2016年的论文《Neural Modu...

2698
来自专栏iOSDevLog

将Core ML模型集成到您的应用程序中

此示例应用程序使用经过训练的MarsHabitatPricer.mlmodel模型来预测火星上的栖息地价格。

601
来自专栏生信小驿站

python双Y轴

762
来自专栏用户画像

流水时空图

指令流水线有“取指”IF、“译码”ID、“执行”EX、“访存”MEM、“写回”WB五个过程段,共有20条指令连续输入此流水线。

582
来自专栏深度学习思考者

Caffe for windows 训练minst和cifar-10

前言 今天刚看了看Theano,本来打算试着改改,再深入学习学习(这就是所谓的深度学习啊,亲们!哈哈)。由于扣扣好友在训练CIFAR-10数据集,所以就在昨天配...

2236

扫码关注云+社区