JavaScript

スポンサーリンク
画像の減色処理 サンプルコードとデモ 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...
Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】 JavaScript

Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】

概要 以前書いた「【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る」を流用して、エディタ機能に「Monaco Editor」を利用した、AtCoder用のデバッグ環境を作りました...
OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。 HTML

OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。OpenCV.js

概要 OpenCVをLLVM→EmscriptenでWebAssembly(以下、wasm)をビルドする。 JavaScriptからOpenCVを呼び出す。 環境 使用するもの OpenCV4.0.0(pre) Emscripten L...
JavaScript

【JavaScript】角度を16方位に変換するソースコード

概要 与えられたある角度を16方位に変換する。 よくありがちな処理としてこんなものがあります。 var dname = ; var dindex = Math.round( degree / 22.5 ) alert("方角は" + ...
JavaScript + canvasで画像変換処理をするときのスニペット HTML

JavaScript + canvasで画像変換処理をするときのスニペット

概要 canvasはJSによって図形などを描画する際に使われます。 canvasに描画された画像はピクセルに対して参照・操作することが可能なので、 これを用いて画像変換処理を行うことができます。 デモ画像 この記事では自分がよく使うス...
スポンサーリンク