konva.jsは、画像処理、アニメーション、クリッピング、複数のレイヤー、
ドラッグでの画像の移動など簡単にできるライブラリです。
数あるjavascriptの画像処理ライブラリを
使ってみましたがkonva.jsが割と使いやすかったので
簡単な使い方の手順をメモしておきます。
サイトコンテンツ
プログラミング 画像ライブラリ konva.jsの使い方
1,まずライブラリのファイルを読み込みます。
1 |
<script src="https://unpkg.com/konva@7.0.3/konva.min.js"></script> |
2,KonvaクラスからStageを作成
出力する画像サイズになりますcontaine というのはHTMLの
要素のidを指定します。
1 2 3 4 5 |
var stage = new Konva.Stage({ container: 'container', width: images.width, height: images.height }); |
3,Konvaクラスから.Layerを作成
1 |
var layer = new Konva.Layer(); |
4 ,KonvaクラスからImageを作成
javascriptのImageクラスと元のx座標y座標,ドラッグ可能かを指定
1 2 3 4 5 6 7 8 |
var pic = new Konva.Image({ image: images, x: 0, y: 0, draggable: false }); pic.cache(); |
5,画像処理(フィルター)をかける
上で作成したImageの
filtersを設定します、以下は画像反転の例です。
1 |
pic.filters([Konva.Filters.Invert]); |
6,イメージをadd関数で追加
レイヤーにイメージをadd、ステージにレイヤーをadd
すると画像が4でx座標y座標と指定した位置に
表示します。
1 2 |
layer.add(pic); stage.add(layer); |
7,スライダーで値を操作
値を操作できるようなフィルターはスライダーなどの値と
連動して画像を変化することができます。リアルタイムで変更
1 2 3 4 5 6 7 8 |
var slider = document.getElementById('slider'); slider.oninput = function() { pic.blurRadius(slider.value); layer.batchDraw(); document.getElementById('output1').value = slider.value; }; } |
以下に様々な画像処理の例を載せています。ほぼ上で載せた
手順のような形です。
関数の引数はすべてjavascriptのImageクラス。
似たような形で少し冗長になりますが、試しやすいと
思うのですべてのコードを掲載しておきます。
プログラミング 画像処理 反転
画像の色をすべて反転するフィルター。
元の画像のすべてのピクセルを補色にしたような形です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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でスライダーを設置する必要あり。
スライダーでブレの度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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でスライダーを設置する必要あり。
スライダーで明暗の度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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でスライダーを設置する必要あり。
スライダーで明暗の度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
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でスライダーを設置する必要あり。
スライダーでエンハンスの度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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; }; } |
プログラミング 画像処理 グレースケール
画像をグレースケールに変更するフィルター
特に値を変更するものはありません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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でスライダーを設置する必要あり。
スライダーでマスクの度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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でスライダーを設置する必要あり。
スライダーでノイズの度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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でスライダーを設置する必要あり。
スライダーでピクセルレートの度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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つ設置する必要あり。
スライダーで、
色相角度
彩度
明度
の度合いが変更できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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(); }); } |