画像処理

スポンサーリンク
画像のヒストグラムを表示する Char.js JavaScript canvas HTML

画像のヒストグラムを表示する Char.js JavaScript canvas

概要 画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。 ヒストグラム算出のサンプルコード ヒストグラムの表示にChart.jsを使っています。 インストール npmを使っている場合は次のようにinstallしま...
画像のプーリング処理 canvas + JavaScript HTML

画像のプーリング処理 canvas + JavaScript

概要 JavaScriptで画像のプーリング処理を行ってみました。 プーリング処理について プーリングは畳み込みに似た処理で、CNNでも重要な役割があります。 画像を圧縮する役割を果たします。 平均プーリングやmaxプーリングといったものが...
画像の減色処理 サンプルコードとデモ JavaScript + canvas JavaScript

画像の減色処理 サンプルコードとデモ JavaScript + canvas

概要 画像の減色処理を行ってみた。 サンプルコードとデモの紹介。 環境は JavaScript + Canvas。 減色処理について 通常、Canvas上での画像のRGBそれぞれの値は0〜255までの256^3で表現していますが、 この...
スポンサーリンク
画像のHSV変換 JavaScript + canvas JavaScript

画像のHSV変換 JavaScript + canvas

概要 画像のHSV変換を行うサンプルコードとデモの紹介 デモ 以下のリンクでデモを動かしています。 デモの内容はRGB画像をHSVに変換し、色相(H)を反転(180を加算)した後、再びRGBに戻すとい処理を行なっています。 ...
大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】 JavaScript

大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】

概要 大津の二値化で画像を2値化するサンプルコード ↑のサンプルコードでは閾値を128として決め打ちで2値化していますが、画像のヒストグラムの分散から適切な閾値を求める方法(判別分析法)の1つです。 ここでは、そのサンプルコードとデ...
画像を2値化する JavaScript + canvas 【画像処理】 JavaScript

画像を2値化する JavaScript + canvas 【画像処理】

概要 JavaScriptで画像を2値化するサンプルコードの紹介。 デモ 実行すると以下のような画像が生成されます。 サンプルソース グレースケールに変換された画像の各画素の値が閾値未満であれば0、閾値以上であれば255に変換します...
画像をグレースケールに変換する JavaScript + canvas 【画像処理】 JavaScript

画像をグレースケールに変換する JavaScript + canvas 【画像処理】

概要 JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。 グレースケール変換式 ここではグレースケール画像変換式は次のように定義しています。 Y = 0.2126 * R + 0.7152 * G + 0.0722 ...
画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】 JavaScript

画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】

概要 JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。 やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。 変換すると以下のような画像になります。 環境はJavaScript + Can...
JavaScript

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

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

画像にモザイクをかける JavaScript canvas デモあり

概要 JavaScript + canvasでブラウザでアップロードした画像にモザイクをかけるデモを作成しました。 デモ画像 スライダーを動かし、モザイクの粒度を決めます。 例えば、10と選択した場合は 10ピクセル x 10ピクセル でモ...
OpenCV

JPG画像を圧縮する OpenCV + Python

概要 ブログなどにアップする画像を比較的簡単に圧縮する方法がないか探していたところ、 PythonとOpenCVで簡単に実装出来そうでした。 そこで、Python + OpenCVで画像を圧縮する方法を紹介します。 環境 OpenCV 3...
JavaScript

JavaScriptによる画像処理と便利なライブラリ

概要 JavaScript + canvasによって行える様々な画像処理方法について紹介します。 Canvas APIについて HTML5には画像等の処理が行える強力なAPIである「Canvas」が備わっています。 これによりJavas...
文字列のAAを自動生成 デモ + サンプルコード JavaScript HTML

文字列のAAを自動生成 デモ + サンプルコード JavaScript

概要 文字列から文字列のAA(アスキーアート)を自動生成するデモを紹介します。 サンプル画像 普通のアルファベット平仮名漢字を変換してみました。 ↓実際の文字列↓ (端末・ブラウザなど、環境によっては正しく表示されません) ...
3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】 JavaScript

3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】

概要 JavaScriptを用いて、3次元の回転行列で画像を回転させるサンプルを紹介します。 3次元の回転行列 任意の軸周りの回転行列は次の式で表すことができます。 各軸周りの回転行列は以下の式で表します。 回転行列 フリー百科事...
【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coco-ssd JavaScript

【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coco-ssd

概要 TensorFlow.js+coco-ssdを用いて、1枚の画像から複数のオブジェクト検出を行う方法を紹介します。 デモも作ったので興味があれば触ってみてください。 オブジェクト検出 オブジェクト検出にはTensorFlow.js +...
Python + OpenCVで顕著性マップを実装 サンプルコード OpenCV

Python + OpenCVで顕著性 (saliecy) マップを実装

概要 Python + OpenCV の saliencymap で顕著性マップを表示するサンプルを紹介します。 顕著性マップ ざっくり言うと、 人が視覚的注意の仕組からすると、画像・映像の中でどの部分を注視しやすいかを画像情報から計算す...
HTML

JavaScript + canvasで砂嵐を描画する サンプルコード

概要 JSとcanvasで砂嵐を描画するサンプルコード紹介します。 動作環境 chrome 61~ デモ 外部ウィンドウで開く サンプルコード main() function main() { var canvas1 = docum...
Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する OpenCV

Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画する

概要 Python + OpenCVのfillConvexPolyで複雑なポリゴンを描画するサンプルを紹介します。 サンプル 以下がサンプルになります。 import cv2 import numpy as np if __name__ ...
Python+OpenCVで任意の画像領域:ROIのみに処理 マスク画像を使って OpenCV

Python+OpenCVで任意の画像領域:ROIのみに処理 マスク画像を使って

概要 Python + OpenCVで任意の画像領域のみに処理を加えるサンプルを1つ紹介します。 やりたいこと(やったこと) ↓↓↓↓↓↓↓↓↓↓ こんな感じで、任意の画像領域(矩形でなくてもよい)のみをグレースケール、2値化、フィル...
OpenCVのチャンネルエラー対処: (-215:Assertion failed) (mtype == CV_8U || mtype == CV_8S) && _mask.sameSize(*psrc1) in function ‘binary_op’ OpenCV

OpenCVのチャンネルエラー対処: (-215:Assertion failed) (mtype == CV_8U || mtype == CV_8S) && _mask.sameSize(*psrc1) in function ‘binary_op’

概要 Python + OpenCVのスクリプトを書いていたところ、タイトルにあるようなエラーが出現しました。 結果的にはnumpyの配列のサイズが異なるのが原因だったようです。 詳細 下記のソースはPythonで読み込んだ画像にマスクをか...
スポンサーリンク
タイトルとURLをコピーしました