數字圖像處理技術在TWaver可視化中的應用

原創

2020-02-22 06:46

數字圖像處理（Digital Image Processing）又稱爲計算機圖像處理，它是指將圖像信號轉換成數字信號並利用計算機對其進行處理的過程。常用的圖像處理方法有圖像增強、復原、編碼、壓縮等，數字圖像處理應用領域非常廣泛。具體關於數字圖像處理的介紹可以參考書籍《岡薩雷斯數字圖像處理》。
TWaver作爲可視化的利器，如果在展示網元的時候，融入圖像處理技術，將會對網元圖標的顯示增加了靈活性，是一件非常有意思的事情。那麼我們不妨來試試，如何將圖像處理技術融入進來。

首先我們重寫一個網元CNode，定製用來處理圖像的特殊網元。

public class CNode extends Node{
public function CNode(id:Object = null){
super(id);
}
override public function get elementUIClass():Class{
return CNodeUI;
}
}

public class CNodeUI extends NodeUI{
private var currentImageAsset:IImageAsset = null;
private var currentComponent:DisplayObject = null;
public function CNodeUI(network:Network, node:Node){
super(network,node);
}
override protected function drawDefaultContent(graphics:Graphics):void{
//此處處理圖像，並繪製圖像
}
}

這樣一個在TWaver中處理圖像的框架就搭建完成了，只要在上面的drawDefaultContent方法中對圖像處理並返回繪製，即可實現圖像的處理。
那麼我們先來看看圖像的常見處理方法,在此說明，選擇一張美女圖片作爲圖像處理的素材。
1.圖像二值化：將圖像視爲二維數組，遍歷二維數組，並處理單個像素的值。實現灰度化，需要定義一個顏色(或灰度值)閾值，將圖像中灰度值按照閾值分開。

private function doBinary(bd:BitmapData):BitmapData {
var rect:Rectangle = bd.rect;
for(var i:int=rect.x; i<rect.x+rect.width;i++) {
for(var j:int=rect.y; j<rect.y+rect.height;j++) {
var color:uint = bd.getPixel(i,j);
if(color>0x605555){
bd.setPixel(i,j,0xffffff);
}else{
bd.setPixel(i,j,0x00000);
}
}
}
return bd;
}

效果如下：

2.圖像灰度化
灰度化的計算公式如下：Gary(i,j)=0.299*R(i,j)+0.587*G(i,j)+0.114*B(i,j)；

private function doGray(bd:BitmapData):BitmapData {
var rect:Rectangle = bd.rect;
for(var i:int=rect.x; i for(var j:int=rect.y; j var color = bd.getPixel(i,j);
var rgb:Array = ColorUtils.CombinationToRGB(color);
var gray = (int)(rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114);
bd.setPixel(i,j,ColorUtils.RGBToCombination([gray,gray,gray]));
}
}
return bd;
}

3.圖像旋轉

private function doRotate(bd:BitmapData):BitmapData{
var rect:Rectangle = bd.rect;
var m:Matrix = new Matrix();
m.rotate(Math.PI/3);
m.translate(rect.height,0);
var bmp:BitmapData = new BitmapData(bd.height, bd.width,false);
bmp.draw(bd,m);
return bmp;
}

圖像旋轉60度

圖像先二值化,再旋轉60度

圖像處理的算法很多，在這先拋磚引玉，後面可以支持更新比較複雜的圖像處理結果。
有人會問，這樣處理有什麼意義呢，具有什麼實際應用價值嗎？
答案是肯定的，任何一種技術，只要用對了地方，就會體現它的價值，那麼圖像處理技術與TWaver相結合能擦出什麼火花呢？
看下面的demo。
在網元發生告警的時候，TWaver傳統方法是通過混合網元圖片顏色和告警顏色，得到效果如下：