如何使用画布进行简单的图像识别？

我相信许多前端学生都对QR码识别，图像比较等高级图像识别技术感到恐惧. 我认为此类识别技术只能通过更高级的语言来实现（例如c等）. 本文尝试从前端的角度介绍如何使用画布执行简单的图像识别.

什么是画布

画布是HTML5中的新元素，您可以使用它来绘制图形，图标和其他任何带有JavaScript的可视图像

画布图像处理应用程序

对于画布，主要有两种对图像处理更重要的方法. 一种是通过html5 canvas的getImageData方法获取图像的像素信息. 可以轻松导入，以导入网络图片或本地图片，以获取画布中图片的像素信息. 您可以通过另一种重要方法putImageData修改像素信息以导出处理后的图片.

1. 接到画布电话

    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. 设计一个可以自动平均剪切图片的画布.

程序（使用画布导出原始图像的二进制数组，然后将其分成单个图像的序列库）

2. 只需编写一个搜寻器程序，使用在步骤1中完成的程序将网站的QR码序列库下载到需要识别的网站即可

3. 手动翻译与二维代码序列库相对应的真实含义，并创建一个从图片到真实含义的映射表.

4. 设计一个自动图片识别程序. 导入要识别的原始二维码后，根据步骤1对其进行分割并分别拍摄图片，以与步骤2中获得的图库进行比较，并比较最接近的对比度. 图片，然后将地图翻译成第三步

表格可获取相应图片的真实含义

好吧canvas 识别二维码，教人钓鱼要比教人钓鱼差. 通过前端做坏事的方法会告诉您，如何发扬繁荣取决于您的灵活使用.

后记

我相信，在许的眼中，前端只是一个处理网页交互和样式外观的简单学科. 随着诸如h5和node之类的新前端技术的普及，前端不再是功能有限的学科canvas 识别二维码，而是功能如此强大，只有您无法想到.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-179763-1.html