はじめまして。京都の会社で画像処理エンジニアをしてますsakiyamaKです。
いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。
で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。
名づけてOpenCVjs！
名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVのjavascript移植版です。
せっかく作ったんで誰かに使ってみてほしいなってことでブログを書き出しました。
一応OpenCVjsを使えばこんな感じにフィルタがかけれるようになります。
これが元の画像で…
まだほとんどのメソッドは移植できてませんが、とりあえずinstagram風フィルタを再現するためのメソッドだけは実装できたので公開してみました。
OpenCVjsコードはこちら
そのままindex.htmlを開いても何種類かフィルタは使えますが、解説のためにindex.htmlを書き直すとOpenCVjsを使うための最小のコードは以下です。
google chromeで試しましたが他でも動くと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>OpenCVjs</title>
<script type="text/javascript" charset="UTF-8"
src = "javascript/statistic.js"></script>
<script type="text/javascript" charset="UTF-8"
src = "javascript/opencv.js"></script>
<script type="text/javascript" charset="UTF-8">
DMY_IMG = "javascript/dmy.jpg";
var iplImage = new IplImage();
function WhiteBlack(imgId, iplImage){
var newIplImage = cvCloneImage(iplImage);
cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);
cvShowImage(imgId, newIplImage);
}
</script>
</head>
<body>
<input type="file" id="file1" onclick="cvLoadImagePre(event, 'file1')"
onchange="cvLoadImage(event, 'dispImage', iplImage, 800)">
<br />
<input type="button" value="white_black"
onClick="WhiteBlack('dispImage', iplImage)">
<hr />
<img id="dispImage" src="">
</body>
</html>
ファイルを選択のボタンを押して好きな画像を読み込んで下さい。その後、white_blackボタンを押すと白黒画像に変換されます。実際に白黒フィルタをかけたらこんな感じになります。
ちゃんとコードの解説とかも書いていこうかと思います。
いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。
で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。
名づけてOpenCVjs！
名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVのjavascript移植版です。
せっかく作ったんで誰かに使ってみてほしいなってことでブログを書き出しました。
一応OpenCVjsを使えばこんな感じにフィルタがかけれるようになります。
これが元の画像で…
こんな感じの写真ができます。
まだほとんどのメソッドは移植できてませんが、とりあえずinstagram風フィルタを再現するためのメソッドだけは実装できたので公開してみました。
OpenCVjsコードはこちら
そのままindex.htmlを開いても何種類かフィルタは使えますが、解説のためにindex.htmlを書き直すとOpenCVjsを使うための最小のコードは以下です。
google chromeで試しましたが他でも動くと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>OpenCVjs</title>
<script type="text/javascript" charset="UTF-8"
src = "javascript/statistic.js"></script>
<script type="text/javascript" charset="UTF-8"
src = "javascript/opencv.js"></script>
<script type="text/javascript" charset="UTF-8">
DMY_IMG = "javascript/dmy.jpg";
var iplImage = new IplImage();
function WhiteBlack(imgId, iplImage){
var newIplImage = cvCloneImage(iplImage);
cvCvtColor(iplImage, newIplImage, CV_CODE.RGB2GRAY);
cvShowImage(imgId, newIplImage);
}
</script>
</head>
<body>
<input type="file" id="file1" onclick="cvLoadImagePre(event, 'file1')"
onchange="cvLoadImage(event, 'dispImage', iplImage, 800)">
<br />
<input type="button" value="white_black"
onClick="WhiteBlack('dispImage', iplImage)">
<hr />
<img id="dispImage" src="">
</body>
</html>
ファイルを選択のボタンを押して好きな画像を読み込んで下さい。その後、white_blackボタンを押すと白黒画像に変換されます。実際に白黒フィルタをかけたらこんな感じになります。
ちゃんとコードの解説とかも書いていこうかと思います。