JavaScript 画像をクリックして色を抽出 画像をクリックするとクリックした部分の色の情報を抽出するサンプルです。 いわゆるカラーピッカーをJSで実装しています。 まず画像をcanvasに変換します。 マウスでクリックされた部分のピクセルの画像データを抽出し、色の情報... 2020-09-22
JavaScript 画像の色からカラーチャート JacaScriptでJPG画像をCanvasに変換し、色情報を解析、抽出するサンプルです。 抽出した色をカラーチャートのようにjQueryで整形してみました。 色の情報はRGBAで抽出されます。 Aは透明度なので今回は無視。 重複する色はユニー... 2020-09-21
JavaScript 画像をcanvasに変換する imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。 表示した画像をCanvasに描画します。 imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。 このサンプ... 2020-09-13
jQuery 上部スクロールでローディングアニメ スマホで最上部までスクロールし、さらに引っ張ると更新されたり、データが読み込まれたりするUIがよくあります。 そのサンプルを作ってみました。 スマホ... 2020-08-11
jQuery スクロールの値を取得する スクロースしたときの数値を取得して表示します。 開いているブラウザのwindowの一番上が0となります。 [[ $(window).scroll(function() { $(&... 2020-08-10
JavaScript 配列の値をユニークにする エクセルの関数のようなことはJSでもある程度できます。 例えば以下のような配列の値があったとします。 [[1,2,3,4,5,6,6,6,7,7,8,9,1,2,3,4,5,6,6,6,... 2020-08-02
HTML5 ローカルCSVを読み込み検索合算する 以下のようなCSVがあったとします。 その中で金額の値を合算するJavaScriptのサンプルです。 [[ ID,社名,種類,商品,金額,評価 1,A社,入力機器,マウス,... 2020-07-21
HTML5 ローカルのCSVを読み込み加工する ローカルにあるファイルをHTML5で実装されたFileAPIを使って読み込み表組を作成するサンプルです。 HTML5というもののHTMLは以下の二行で、他はJavaScriptになります。 また、以下のサンプルはjQueryも利用しています。 まずはinputするボタンを設置します... 2020-07-19
NodeJS ディレクトリ構成を作る expressパッケージを使ってディレクトリごとに実行される処理を書くサンプルです。 expressパッケージをインストールします。 参考:https://expressjs.com/ja/ 「/」つまりトップページで処理されるapp.jsのサンプルです。 [[const exp... 2020-07-12
NodeJS 基本的なnpmのコマンド バージョン取得 [[npm -v]] パッケージのインストール [[npm install パッケージ名 npm i パッケージ名]] インストール済みのパッケージ一覧... 2020-07-12