スポンサーリンク

JavaScriptで画像処理100本ノックに挑戦してみた

スポンサーリンク
JavaScript
スポンサーリンク

画像処理100本ノックをJavaScriptで挑戦してみました。
Qiitaでバズってるのを見かけて作りたくなりました。
「ブラウザ上で完結したら面白いな」 & 「デモを共有できたら面白い」という動機ではじめました。
まだいくつか問題を残していますが、ここまで解いてみた所感を書きます。

スポンサーリンク

画像処理100本ノックについて

yoyoyo-yo/Gasyori100knock
画像処理100本ノックして画像処理を画像処理して画像処理するためのもの For Japanese, English and Chinese - yoyoyo-yo/Gasyori100knock

画像処理が初めての人のための問題集です。
あの「自然言語処理100本ノック」をリスペクトしているのでしょうか。
Qiitaでの紹介記事

画像処理100本ノックを作ったった - Qiita
画像処理が初めての人のための問題集をつくったりました。(完成!!) 研究室の後輩用に作ったものです。 自然言語処理100本ノックがあるのに、画像処理のがなかったので作ってみました。 画像処理の基本のアルゴリズム理解につながると思いま...

ソースは全てPythonです。C++版の制作も進んでいるようです。

何よりも解説が日本語で書かれているところがありがたいです。

JavaScriptで挑戦してみる

この画像処理100本ノックをJavaScriptで挑戦してみました。
Canvasを使って画像配列を操作できるので基本的な実装は難しくありませんでした。

デモサイト

GitHub Pages に置きました。

画像処理100本ノックJS
画像処理100本ノックJS : 画像処理100本ノックにJavaSCriptで挑戦してみました。

GitHub

s-yoshiki/Gasyori100knockJS
画像処理100本ノックをJSで解いてみる. Contribute to s-yoshiki/Gasyori100knockJS development by creating an account on GitHub.

現在(2019/03/26)、約2ヶ月かけて40問目までクリアしましたが、後半に重い問題が多く残っているため、
100本クリアにはこれまで以上に時間がかかりそうです。

フロントの実装について

フレームワークにVueJSを使っています。VueRouterなども用いてSPAとして動かしています。

問題の解説

画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】
概要JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。変換すると以下のような画像になります。環境はJavaScript + Can...
画像をグレースケールに変換する JavaScript + canvas 【画像処理】
概要JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。グレースケール変換式ここではグレースケール画像変換式は次のように定義しています。Y = 0.2126 * R + 0.7152 * G + 0.0722 ...
画像を2値化する JavaScript + canvas 【画像処理】
概要JavaScriptで画像を2値化するサンプルコードの紹介。デモ実行すると以下のような画像が生成されます。サンプルソースグレースケールに変換された画像の各画素の値が閾値未満であれば0、閾値以上であれば255に変換します...
大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】
概要大津の二値化で画像を2値化するサンプルコード↑のサンプルコードでは閾値を128として決め打ちで2値化していますが、画像のヒストグラムの分散から適切な閾値を求める方法(判別分析法)の1つです。ここでは、そのサンプルコードとデ...
画像のHSV変換 JavaScript + canvas
概要画像のHSV変換を行うサンプルコードとデモの紹介デモ以下のリンクでデモを動かしています。デモの内容はRGB画像をHSVに変換し、色相(H)を反転(180を加算)した後、再びRGBに戻すとい処理を行なっています。...
画像の減色処理 サンプルコードとデモ JavaScript + canvas
概要画像の減色処理を行ってみた。サンプルコードとデモの紹介。環境は JavaScript + Canvas。減色処理について通常、Canvas上での画像のRGBそれぞれの値は0〜255までの256^3で表現していますが、この...
画像のプーリング処理 canvas + JavaScript
概要JavaScriptで画像のプーリング処理を行ってみました。プーリング処理についてプーリングは畳み込みに似た処理で、CNNでも重要な役割があります。画像を圧縮する役割を果たします。平均プーリングやmaxプーリングといったものが...
画像のヒストグラムを表示する Chart.js JavaScript canvas
概要画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。ヒストグラム算出のサンプルコードヒストグラムの表示にChart.jsを使っています。インストールnpmを使っている場合は次のようにinstallしま...

JSで挑戦するメリット・デメリット

ブラウザ上で動かせるのがJSを使う最大のメリットだと思います。
加えて、チャート系のライブラリが豊富なので、matplotlibに比べ、グラフィカルな表現がしやすいのも良い点だと感じました。

一方で、行列演算に関してはJSではnumjsやmath.jsといったものはありますが、
Numpyほど簡潔に行列の処理を書くことはできません。

(※今回のデモではアフィン変換などの行列演算を多用する箇所で math.js を使いました。)

また、フーリエ変換を実装しようとした際に複素数を利用しますが、
Pythonは「j」で扱えるのに対し、JSの場合は実部と虚部をそれぞれ実装する必要がありました。

改めてPython、Numpyの偉大さには感謝したいと思います。

関連

タイトルとURLをコピーしました