スポンサーリンク
画像の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...
Proxy環境下で快適に作業する設定メモ Linux

Proxy環境下で快適に作業する設定メモ

概要 社内Proxy(プロキシ)環境でネットワークに依存したアプリケーションを動かすためにはプロキシの設定を正しく適用する必要があります。 とりあえず、使用頻度が高いアプリケーションの設定メモを書き出します。 なお、この記事ではproxy...
PHP

PHPで簡単ページング処理を実装する サンプルコード

概要 PHPで簡単なページング処理を書いてみました。 環境 PHP 7.1.19 Smarty 3.1.33 作るもの 簡単なページング処理を作ります。 具体的には、ある取得したデータ(サンプルソースでは51件)に対し1ページに10件まで表...
PHP

PHPにSmartyをセットアップ

概要 PHPにSmartyをセットアップをするメモ 試した環境 PHP 7.1.19 Smarty 3.1.33 Smartyについて 古くからあるPHPのテンプレートエンジンです。 trends.embed.renderExpl...
PHP

PHP + Smartyで超簡単なページング処理とサンプルコード

概要 PHPで簡単なページング処理を書いてみました。 環境 PHP 7.1.19 Smarty 3.1.33 Smartyのセットアップ GitHubから適当なバージョンの物を落としてきます。 PHPのインクルードディレクトリに配置すれば完...
AWS

S3 で静的サイトをホスティングする

概要 S3でバケットに置いたHTMLなどを静的サイトとしてホスティングする方法を紹介します。 バケットの作成と公開設定 S3バケットの作成と公開設定はここを参考にしてください。 静的ホスティングの設定 AWSのコンソールからバケット...
AWS

S3にパブリック公開バケットを作成する

概要 AWSのS3に公開用の設定をしたバケットを作成する方法について(ざっくり)紹介します。 なお、AWSのコンソールのインタフェースは早いスピードで変わるので、 キャプチャ画像が古くなっているかもしれませんが、ご容赦ください。 S3バケッ...
HTML

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

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

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

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

JPG画像を圧縮する OpenCV + Python

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

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

概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。 ライブラリとかは使っていません。 デモ まずはデモをみてください。 外...
JavaScript

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

概要 JavaScript + canvasによって行える様々な画像処理方法について紹介します。 Canvas APIについて HTML5には画像等の処理が行える強力なAPIである「Canvas」が備わっています。 これによりJavas...
画像の拡張子を一括置換する コマンド Linux Mac WSL Linux

画像の拡張子を一括置換する コマンド Linux Mac WSL

概要 画像の拡張子を一括で置換するコマンドの紹介です。 ディレクトリ内で拡張子が大文字だったり小文字だったり統一されてない状態から全て同じ拡張子に統一することができます。 環境 Linux (Ubuntu18.04) Mac OS X ...
スポンサーリンク
タイトルとURLをコピーしました