推薦理由:javascript
識別技術在我看來是一種高逼格的技術,如二維碼識別、圖像對比等這類高大上的圖像識別技術感受可望而不可即;下面我推薦這篇文章,試圖從前端的角度出發介紹如何經過canvas來進行簡單的圖像識別,但願對其感興趣的親們有所幫助。html
做者:莫卓穎前端
相信不少前端同窗對於二維碼識別、圖像對比等這類高大上的圖像識別技術望而生畏,以爲此類識別技術只能經過更加底倉的高級語言才能實現(諸如c等),本文試圖從前端的角度出發介紹如何經過canvas來進行簡單的圖像識別。html5
canvas是什麼java
canvas是HTML5中的新元素,你可使用javascript用它來繪製圖形、圖標、以及其它任何視覺性圖像
canvas圖片處理運用node
對於canvas來講,主要是兩個方法對圖片處理比較重要,一個是經過html5 canvas的 getImageData 方法獲取圖片的像素信息,能夠很方便的經過方法導入到把網絡圖片或者本地的圖片導入至canvas中並獲取圖片的像素信息,能夠修改像素信息後經過另一個重要的方法putImageData導出處理後的圖片。react
一、獲取canvas調用web
var c = document.createElement('canvas'); context = c.getContext('2d');
二、獲取導入圖像信息canvas
var hiddenImage = new Image();數組
hiddenImage.src=圖片地址 context .drawImage(hiddenImage, 0, 0, width, height); hiddenImage .onload=function(){ context.putImageData(hiddenImage, 0, 0); } 三、獲取圖片的像素信息
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; }
四、導出處理過的圖片
context.putImageData(第三步處理過得像素信息,0,0);
二維碼識別思路
一、設計一個自動等分切割圖片的canvas
程序(利用canvas導出原圖的二進制數組,而後等分數組後出單個圖片的序列庫)
二、簡單作個爬蟲程序,利用步驟1完成的程序到須要識別的網站下載該網站的二維碼序列圖庫
三、手工翻譯二維碼序列圖庫對應的真實含義,並創建圖片到真實含義的map表。
四、設計自動圖片識別程序,導入須要識別的原二維碼後,按照1的步驟進行等分,分別拿等分後的圖片依次對比步驟2獲取的圖庫,對比出對比度最接近的圖片,而後經過步驟三翻譯出來的map
表獲取對應圖片的真實含義
好了,授人以魚不如授人以漁,經過前端進行作壞事的方法告訴你了,如何發揚光大就看你的靈活運用。
後記
相信在不少人眼中, 前端僅僅是一門簡單的處理網頁交互、樣式門面學科。隨着h五、node等前端新技術的流行,前端再也不是功能有限的學科,而是功能強大到只有你想不到木有作不到地步。
原文連接:http://ivweb.io/topic/5637902...
相關推薦
【騰訊TMQ】看圖測試指南——圖像識別在測試中的應用
前端開發框架簡介:angular和react
萬象優圖CI:圖片內容識別、人臉識別
文章出自騰訊雲技術社區
(埋文字鏈https://www.qcloud.com/commun...)
推薦你們關注騰訊雲技術社區微信公衆號:QcloudCommunity