javascriptで画像処理してみよう(6)～エッジ検出ぐらいすぐできるし！～

更新した日はアクセス数が延びてはいるんですが、それって全部自分のアクセスじゃないかと不安な画像処理ブログ第6弾です。

前回のブログのラストで、次は1画素ずつ処理するやりかたを書くとかいってたんですが「javascript 画像処理」で検索をかけると最初にヒットするサイトがエッジ検出をやっていました。

………そ！それぐらいOpenCVjsならもっと簡単にできるんだからね！

アクセス数の違いがライブラリの優秀さの決定的差ではないことを教えてあげるんだから！

と悔しさがにじみ出たんでエッジ検出やります。

こんな画像が

こんなふうにエッジ検出されます

もう能書きはいいからコードは以下。

OpenCVjsを使えば全部でたったの49行でソーベルフィルタとケニーフィルタのエッジ検出が実装されてます。

短すぎるからhtml部とscript部なんて分けてないんだよ！

<!DOCTYPE html>

<head>

var DMY_IMG = "javascript/dmy.jpg";

var iplImage = new IplImage();

//ソーベルフィルタ

function Sobel(imgId, iplImage){

//新しい画像領域を確保

var newIplImage = cvCreateImage(iplImage.width, iplImage.height);

//白黒濃淡の表色系に変換

cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);

//ソーベルフィルタ

cvSobel(newIplImage, newIplImage, 0, 1);

//絶対値化

cvConvertScaleAbs(newIplImage, newIplImage);

//imgIdに画像を転送

cvShowImage(imgId, newIplImage);

}

//ケニーフィルタ

function Canny(imgId, iplImage){

//新しい画像領域を確保

var cannyImage = cvCreateImage(iplImage.width, iplImage.height);

//白黒濃淡の表色系に変換

cvCvtColor(iplImage, cannyImage, CV_CODE.RGB2GRAY);

//ケニーフィルタ

cvCanny(cannyImage, cannyImage, 50, 200);

//imgIdに画像を転送

cvShowImage(imgId, cannyImage);

}

</script>

</head>

<body>

<br />

<hr />

</body>

</html>

最初にご覧いただいたのはソーベルの方でケニーの方のエッジ検出はこんな感じです。

エッジ検出はinstagram風の写真加工にも活かせる部分はあるかと思いますが、どちらかとえば生産ラインの品質管理システムで使われることが多いと思います。

キズがあったら自動検出とか。

今回はこんだけ！

ふぅ、これで個人的な意地は通せた。