フロントエンド

スポンサーリンク
JavaScript

0埋め・ゼロ埋め処理 のコードJavaScript

概要 JavaScriptで 0埋め / ゼロ埋め / zero埋め 処理を行うサンプルコード サンプル コード const pad = (num, length, str='0') => { return (new Arra...
JavaScript

順列・組み合わせ のサンプルコード JS [permutation] [combination]

概要 順列(permutation) と 組み合わせ(combination) のサンプルコードをJavaScriptで実装してみました。 順列 - permutation サンプルコード const permutation = (nums...
JavaScript

うるう年を求めるプログラム JavaScript

概要 うるう年を求める実装メモです。 閏年の条件 閏年の条件は以下の通りとなります。 4で割り切れる 100で割り切れない 400で割り切れる 国立天文台 サンプルコード 判定関数 const isLeapYear =...
スポンサーリンク
HTML

MonacoEditor + Vue を使ってエディタを実装

概要 Vue + MonacoEditorでJSのデバッガを作ってみました。 標準入出力(?)をサポートしています。とりあえず意味がわからないと思うのでデモをみてください。 紹介 デモ GitHub セットアップ Vue Vueプ...
HTML

async awaitで画像を読み込み canvasに描画 JavaScript

概要 async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。 onloadメソッド縛りで実装すると非同期地獄になりますが、async await を使うことによりす...
JavaScript

AtCoderをJavaScriptで挑むのは厳しいと思った

AtCoderをJavaScriptで挑むのは厳しい これまでJavaSriptでAtCoderに挑戦し続けてきたが、流石に厳しいかもしれない... というのも、言語の構造的に限界があると感じたからです。 ↑ ※誤解を招く表現だと思うので...
JavaScript

OpenCV.jsを動かしてみる + デモ

概要 OpenCV.jsを試してみました。 環境 OpenCV.js v4.1.0 OpenCV.jsのセットアップ OpenCVをWasmにビルドします。 デモではこちらを拝借します。 サンプルソース グレースケール let s...
HTML

JavaScriptで画像のヒストグラムの正規化

概要 画像のヒストグラムを正規化するコードの紹介 サンプルソース /** * メイン * @param {Object} canvas * @param {Object} image */ function main(canva...
HTML

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

概要 画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。 ヒストグラム算出のサンプルコード ヒストグラムの表示にChart.jsを使っています。 インストール npmを使っている場合は次のようにinstallしま...
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

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

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

画像のHSV変換 JavaScript + canvas

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

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

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

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

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

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

概要 JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。 グレースケール変換式 ここではグレースケール画像変換式は次のように定義しています。 Y = 0.2126 * R + 0.7152 * G + 0.0722 ...
JavaScript

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

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

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

ブラウザ上でWindowsXPが動いているように見えるデモ エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demo pic.twitter.com/s0bkHFyKHO — s-yoshiki...
スポンサーリンク
タイトルとURLをコピーしました