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

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

プログラミング 学習

プログラミング 使いやすい画像ライブラリ(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つ設置する必要あり。
スライダーで、
色相角度
彩度
明度

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

 

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

執筆者:

関連記事

no image

プログラミング 勉強 場所は?

日本の住宅環境は平均するとさほどよくないという。 賃貸の人などは自宅が落ち着かないという人も 多いのではないでしょうか。 自宅に物が多いというような方も、集中できない 原因となっているかもしれません。 …

no image

プログラミング 黒い画面というのは?

プログラミング初心者の方はプログラミングとは GUI(グラフィカルユーザーインターフェイス 操作がマウスなどでも出来る) 以外の黒い画面だけで行うものだという考えをお持ちの方も 多くいるかと思います。 …

no image

プログラミング 2つの言語を並行学習すると効率は

勉強においては、ブロック・プラクティス(集中的練習)や インターリーブ(並行学習)があり   並行学習することによって効果が高いとされて います。 これは人の集中力は大人でも15分が限界だと …

no image

プログラミング学習に必要なもの

プログラミング学習に必要なものは 結論を言ってしまうと 物でいえばスマホだけでも概要を学習するには 問題ありません、ただし非常に効率が悪かったり 実践的ではなかったりします。   サイトコン …

no image

プログラミング メモ帳 できる javascript

サイトコンテンツ1 メモ帳でできる言語 javascript 特徴1.1 フレームワーク1.2 WEBプラットフォーム2 プログラミング javascript メモ帳でできること2.1 他の言語から簡 …