JavaScript

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

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

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

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

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

JSで画像をまとめて読み込む(プリロードする)

概要 JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。 サンプルコード let imagesUrl = [ "/path/to...
スポンサーリンク
JavaScript

JavaScriptで多次元配列の初期化を行う

概要 JavaScript(ES2015)で多次元配列を任意の値で初期化する方法について。 1次元配列 例えば、 let arr = new Array(5) と宣言した場合 console.log(arr) // undefined とな...
JavaScript

ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)

概要 ブラウザで完結するAtCoder用のデバッガを作ってみました。 対応言語は(JS)のみになっています。 というのも、書いたコードをブラウザ上でeval関数に突っ込んでいるだけの実装だからです。 ブラウザ上で他の言語をサポートする仕組み...
画像の減色処理 サンプルコードとデモ 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...
ブラウザ上でWindowsXPが動く?? JavaScript

ブラウザ上でWindowsXPが動く??

ブラウザ上でWindowsXPが動いているように見えるデモ エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demo pic.twitter.com/s0bkHFyKHO — s-yoshiki...
JavaScript

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

画像処理100本ノックをJavaScriptで挑戦してみました。 Qiitaでバズってるのを見かけて作りたくなりました。 「ブラウザ上で完結したら面白いな」 & 「デモを共有できたら面白い」という動機ではじめました。 まだいくつか問...
vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで JavaScript

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで

概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.4.0 nodejsとnpmの導入については省略します。 vue@cl...
HTML

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

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

JavaScript canvasで扇型を描画するサンプル

概要 canvasで扇型を描画するサンプルを紹介します。 解説 扇型はCanvas API の CanvasRenderingContext2D.arc()で描画することができます。 moveToメソッドで始点を与えることで扇型を描画す...
HTML

回転ルーレットを作る JavaScript + canvas

概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。 ライブラリとかは使っていません。 デモ まずはデモをみてください。 外...
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次元の回転行列 任意の軸周りの回転行列は次の式で表すことができます。 各軸周りの回転行列は以下の式で表します。 回転行列 フリー百科事...
スポンサーリンク
タイトルとURLをコピーしました