アプリケーションにトラックバーを追加する

目標

• HTML DOMのInput Rangeオブジェクトを使ってアプリケーションにトラックバーを追加する。

コードのデモ

ここでは、2枚の画像を合成する簡単なアプリケーションを作成する。トラックバーを使ってユーザーに重みを入力させる。

まず、3つのcanvas要素を作成する必要がある。入力用に2つ、出力用に1つである。チュートリアル 画像の基本操作 を参照してほしい。

let src1 = cv.imread('canvasInput1');
let src2 = cv.imread('canvasInput2');

次に、以下に示すように、HTML DOMのInput Rangeオブジェクトを使ってトラックバーを実装する。

覚え書き

type="range" の <input> 要素は、Internet Explorer 9 およびそれ以前のバージョンではサポートされていない。

document.createElement() メソッドを使って type="range" の <input> 要素を作成できる。

let x = document.createElement('INPUT');
x.setAttribute('type', 'range');

getElementById() を使って type="range" の <input> 要素にアクセスできる。

let x = document.getElementById('myRange');

トラックバーとして、range要素にはトラックバー名、デフォルト値、最小値、最大値、ステップ、そしてトラックバーの値が変化するたびに実行されるコールバック関数が必要である。コールバック関数は常にデフォルト引数を持ち、それはトラックバーの位置である。さらに、トラックバーの値を表示するためのテキスト要素を用意するとよい。今回の場合は、以下のようにトラックバーを作成できる。

Weight: <input type="range" id="trackbar" value="50" min="0" max="100" step="1" oninput="callback()">
<input type="text" id="weightValue" size="3" value="50"/>

最後に、コールバック関数内でトラックバーの値を使い、2枚の画像を合成して結果を表示する。

let weightValue = document.getElementById('weightValue');
let trackbar = document.getElementById('trackbar');
weightValue.setAttribute('value', trackbar.value);
let alpha = trackbar.value/trackbar.max;
let beta = ( 1.0 - alpha );
let src1 = cv.imread('canvasInput1');
let src2 = cv.imread('canvasInput2');
let dst = new cv.Mat();
cv.addWeighted( src1, alpha, src2, beta, 0.0, dst, -1);
cv.imshow('canvasOutput', dst);
dst.delete();
src1.delete();
src2.delete();

参照

cv.addWeighted

試してみよう