プログラミングスクール比較

プログラミングに関する情報サイトです。副業,稼ぎ方,学習方法,スクール等

プログラミング 学習

プログラミング 使いやすい画像ライブラリ(javascript konva.js)

投稿日:2020年11月26日 更新日:

konva.jsは、画像処理、アニメーション、クリッピング、複数のレイヤー、
ドラッグでの画像の移動など簡単
にできるライブラリです。

数あるjavascriptの画像処理ライブラリを
使ってみましたがkonva.jsが割と使いやすかったので
簡単な使い方の手順をメモしておきます。

 

プログラミング 画像ライブラリ konva.jsの使い方

 

1,まずライブラリのファイルを読み込みます。

 

2,KonvaクラスからStageを作成

出力する画像サイズになりますcontaine というのはHTMLの
要素のidを指定します。


 

3,Konvaクラスから.Layerを作成

 

4 ,KonvaクラスからImageを作成

javascriptのImageクラスと元のx座標y座標,ドラッグ可能かを指定

 

5,画像処理(フィルター)をかける

上で作成したImageの
filtersを設定します、以下は画像反転の例です。

 

6,イメージをadd関数で追加

レイヤーにイメージをadd、ステージにレイヤーをadd
すると画像が4でx座標y座標と指定した位置に
表示します。

 

7,スライダーで値を操作

値を操作できるようなフィルターはスライダーなどの値と
連動して画像を変化することができます。リアルタイムで変更

 

以下に様々な画像処理の例を載せています。ほぼ上で載せた
手順のような形です。
関数の引数はすべてjavascriptのImageクラス。

似たような形で少し冗長になりますが、試しやすいと
思うのですべてのコードを掲載しておきます。

 

プログラミング 画像処理 反転

画像の色をすべて反転するフィルター。
元の画像のすべてのピクセルを補色にしたような形です。

 

プログラミング 画像処理 ブラー

画像全体にブレをかけるフィルター
htmlでスライダーを設置する必要あり。
スライダーでブレの度合いが変更できます。

 

プログラミング 画像処理 明暗

画像の明暗を変更するフィルター
htmlでスライダーを設置する必要あり。
スライダーで明暗の度合いが変更できます。

 

プログラミング 画像処理 コントラスト

画像のコントラストを調整するフィルター
htmlでスライダーを設置する必要あり。
スライダーで明暗の度合いが変更できます。

 

プログラミング 画像処理 エンハンス

画像にエンハンスのフィルターをかけます。
画像がシャープな感じに変更される。
htmlでスライダーを設置する必要あり。
スライダーでエンハンスの度合いが変更できます。

 

プログラミング 画像処理 グレースケール

画像をグレースケールに変更するフィルター
特に値を変更するものはありません。

 

プログラミング 画像処理 マスク

画像にマスクをかける処理を行う。
htmlでスライダーを設置する必要あり。
スライダーでマスクの度合いが変更できます。

 

プログラミング 画像処理 ノイズ

画像にノイズをかけるフィルター
htmlでスライダーを設置する必要あり。
スライダーでノイズの度合いが変更できます。

 

プログラミング 画像処理 ピクセルレート

画像にピクセルレートのフィルターをかける
htmlでスライダーを設置する必要あり。
スライダーでピクセルレートの度合いが変更できます。

 

プログラミング 画像処理 HSL

画像のHSLを変更できます。
htmlでスライダーを3つ設置する必要あり。
スライダーで、
色相角度
彩度
明度

の度合いが変更できます。

 

-プログラミング 学習
-,

記事
プログラミング スクール 退職後おすすめ

退職してからじっくりと学べるおすすめな プログラミング スクールを 紹介しています。 退職した場合は…

プログラミング 写経(模写)は時間の無駄かもしれないが上達する

プログラミング初心者の方は何からはじめていいのか わからないということで、とりあえずあまり考えずに …

プログラミング学習 挫折 対策

プログラミング 学習でのモチベーションの保ち方 を学習した際のことを考えていろいろと書いてみました。…

プログラミング 儲かる方法

プログラミング 副業 フリーランスでの 案件で稼ぐのではなく、趣味で儲ける方法を記載しています。 ア…