作者：莫卓穎
相信很多前端同學對於二維碼識別、圖像對比等這類高大上的圖像識別技術望而生畏，覺得此類識別技術只能通過更加底倉的高級語言才能實現（諸如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等前端新技術的流行，前端不再是功能有限的學科，而是功能強大到只有你想不到木有做不到地步。
相關閱讀：
騰訊存儲與CDN免費體驗
人人都可以做深度學習應用：入門篇（上）
一起用HTML5 canvas做一個簡單又騷氣的粒子引擎
新增線下、APP、公眾號多處入口，小程序會再火起來么？
此文已由作者授權騰訊雲技術社區發布，轉載請注明文章出處，獲取更多雲計算技術干貨，可請前往騰訊雲技術社區
歡迎大家關注騰訊雲技術社區-博客園官方主頁，我們將持續在博客園為大家推薦技術精品文章哦~