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

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

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

サイトコンテンツ

1 プログラミング画像ライブラリ konva.jsの使い方
2 プログラミング画像処理反転
3 プログラミング画像処理ブラー
4 プログラミング画像処理明暗
5 プログラミング画像処理コントラスト
6 プログラミング画像処理エンハンス
7 プログラミング画像処理グレースケール
8 プログラミング画像処理マスク
9 プログラミング画像処理ノイズ
10 プログラミング画像処理ピクセルレート
11 プログラミング画像処理 HSL

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

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

<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>

1	<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script>

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

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

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

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

var layer = new Konva.Layer();

1	var layer = new Konva.Layer();

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

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

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

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

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

pic.filters([Konva.Filters.Invert]);

1	pic.filters([Konva.Filters.Invert]);

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

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

layer.add(pic);
stage.add(layer);

1 2	layer.add(pic); stage.add(layer);

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

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

var slider = document.getElementById('slider');
slider.oninput = function() {
pic.blurRadius(slider.value);
layer.batchDraw();
document.getElementById('output1').value = slider.value;
};

}

var slider = document.getElementById('slider');

slider.oninput = function() {

pic.blurRadius(slider.value);

layer.batchDraw();

document.getElementById('output1').value = slider.value;

};

}

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

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

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

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

function Invert(images) {

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Invert]);

layer.add(pic);
stage.add(layer);
}

function Invert(images) {

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Invert]);

layer.add(pic);

stage.add(layer);

}

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

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

function Blur(images) {

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Blur]);
layer.add(pic);
stage.add(layer);

var slider = document.getElementById('slider');
slider.oninput = function() {
pic.blurRadius(slider.value);
layer.batchDraw();
document.getElementById('output1').value = slider.value;
};

}

function Blur(images) {

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Blur]);

layer.add(pic);

stage.add(layer);

var slider = document.getElementById('slider');

slider.oninput = function() {

pic.blurRadius(slider.value);

layer.batchDraw();

document.getElementById('output1').value = slider.value;

};

}

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

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

function Brighten(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Brighten]);
layer.add(pic);
stage.add(layer);

var slider = document.getElementById('slider');
slider.oninput = function() {
pic.brightness(slider.value);
layer.batchDraw();
document.getElementById('output1').value = slider.value;
};
}

function Brighten(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Brighten]);

layer.add(pic);

stage.add(layer);

var slider = document.getElementById('slider');

slider.oninput = function() {

pic.brightness(slider.value);

layer.batchDraw();

document.getElementById('output1').value = slider.value;

};

}

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

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

function Contrast(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Contrast]);
layer.add(pic);
stage.add(layer);

var sliders = ['contrast'];

sliders.forEach(function(attr) {
var slider = document.getElementById(attr);
function update() {
pic[attr](parseFloat(slider.value));
layer.batchDraw();
document.getElementById('output1').value = slider.value;
}
slider.oninput = update;
update();
});
}

function Contrast(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Contrast]);

layer.add(pic);

stage.add(layer);

var sliders = ['contrast'];

sliders.forEach(function(attr) {

var slider = document.getElementById(attr);

function update() {

pic[attr](parseFloat(slider.value));

layer.batchDraw();

document.getElementById('output1').value = slider.value;

}

slider.oninput = update;

update();

});

}

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

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

function Enhance(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Enhance]);
layer.add(pic);
stage.add(layer);

var slider = document.getElementById('slider');
slider.oninput = function() {
pic.enhance(parseFloat(slider.value));
layer.batchDraw();
document.getElementById('output1').value = slider.value;
};
}

function Enhance(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Enhance]);

layer.add(pic);

stage.add(layer);

var slider = document.getElementById('slider');

slider.oninput = function() {

pic.enhance(parseFloat(slider.value));

layer.batchDraw();

document.getElementById('output1').value = slider.value;

};

}

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

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

function Grayscale(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Grayscale]);
layer.add(pic);
stage.add(layer);

}

function Grayscale(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Grayscale]);

layer.add(pic);

stage.add(layer);

}

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

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

function Mask(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Mask]);
layer.add(pic);
stage.add(layer);

var slider = document.getElementById('slider');
slider.oninput = function() {
pic.threshold(slider.value);
layer.batchDraw();
document.getElementById('output1').value = slider.value;
};
}

function Mask(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Mask]);

layer.add(pic);

stage.add(layer);

var slider = document.getElementById('slider');

slider.oninput = function() {

pic.threshold(slider.value);

layer.batchDraw();

document.getElementById('output1').value = slider.value;

};

}

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

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

function Noise(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Noise]);
layer.add(pic);
stage.add(layer);

var sliders = ['noise'];
sliders.forEach(function(attr) {
var slider = document.getElementById(attr);
function update() {
pic[attr](parseFloat(slider.value));
layer.batchDraw();
document.getElementById('output1').value = slider.value;

}
slider.oninput = update;
update();

});

}

function Noise(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Noise]);

layer.add(pic);

stage.add(layer);

var sliders = ['noise'];

sliders.forEach(function(attr) {

var slider = document.getElementById(attr);

function update() {

pic[attr](parseFloat(slider.value));

layer.batchDraw();

document.getElementById('output1').value = slider.value;

}

slider.oninput = update;

update();

});

}

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

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

function Pixelate(images){

var stage = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.Pixelate]);
layer.add(pic);
stage.add(layer);

var sliders = ['pixelSize'];
sliders.forEach(function(attr) {
var slider = document.getElementById(attr);
function update() {
pic[attr](parseFloat(slider.value));
layer.batchDraw();
}
slider.oninput = update;
update();
document.getElementById('output1').value = slider.value;

});

}

function Pixelate(images){

var stage = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.Pixelate]);

layer.add(pic);

stage.add(layer);

var sliders = ['pixelSize'];

sliders.forEach(function(attr) {

var slider = document.getElementById(attr);

function update() {

pic[attr](parseFloat(slider.value));

layer.batchDraw();

}

slider.oninput = update;

update();

document.getElementById('output1').value = slider.value;

});

}

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

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

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

function change_hsl(images){

g_STAGE = new Konva.Stage({
container: 'container',
width: images.width,
height: images.height
});
var layer = new Konva.Layer();

var pic = new Konva.Image({
image: images,
x: 0,
y: 0,
draggable: false
});

pic.cache();
pic.filters([Konva.Filters.HSL]);
layer.add(pic);
g_STAGE.add(layer);

//document.getElementById('save').addEventListener('click',downloadURI,false);

var sliders = ['hue', 'saturation', 'luminance'];

//スライダー操作
sliders.forEach(function(attr) {
var slider = document.getElementById(attr);

function update() {
pic[attr](parseFloat(slider.value));
layer.batchDraw();

// alert(attr);
if(attr == 'hue')document.getElementById('output1').value = slider.value;
if(attr == 'saturation')document.getElementById('output2').value = slider.value;
if(attr == 'luminance')document.getElementById('output3').value = slider.value;
}
slider.oninput = update;
update();
});

}

function change_hsl(images){

g_STAGE = new Konva.Stage({

container: 'container',

width: images.width,

height: images.height

});

var layer = new Konva.Layer();

var pic = new Konva.Image({

image: images,

x: 0,

y: 0,

draggable: false

});

pic.cache();

pic.filters([Konva.Filters.HSL]);

layer.add(pic);

g_STAGE.add(layer);

//document.getElementById('save').addEventListener('click',downloadURI,false);

var sliders = ['hue', 'saturation', 'luminance'];

//スライダー操作

sliders.forEach(function(attr) {

var slider = document.getElementById(attr);

function update() {

pic[attr](parseFloat(slider.value));

layer.batchDraw();

// alert(attr);

if(attr == 'hue')document.getElementById('output1').value = slider.value;

if(attr == 'saturation')document.getElementById('output2').value = slider.value;

if(attr == 'luminance')document.getElementById('output3').value = slider.value;

}

slider.oninput = update;

update();

});

}

記事
プログラミングスクール退職後おすすめ	退職してからじっくりと学べるおすすめなプログラミングスクールを紹介しています。退職した場合は…
プログラミング写経(模写)は時間の無駄かもしれないが上達する	プログラミング初心者の方は何からはじめていいのかわからないということで、とりあえずあまり考えずに …
プログラミング学習挫折対策	プログラミング学習でのモチベーションの保ち方を学習した際のことを考えていろいろと書いてみました。…
プログラミング儲かる方法	プログラミング副業フリーランスでの案件で稼ぐのではなく、趣味で儲ける方法を記載しています。ア…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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