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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
Add a Trackbar to Your Application {#tutorial_js_trackbar}
==================================
Goal
----
- Use HTML DOM Input Range Object to add a trackbar to your application.
Code Demo
---------
Here, we will create a simple application that blends two images. We will let the user enter the
weight by using the trackbar.
First, we need to create three canvas elements: two for input and one for output. Please refer to
the tutorial @ref tutorial_js_image_display.
@code{.js}
let src1 = cv.imread('canvasInput1');
let src2 = cv.imread('canvasInput2');
@endcode
Then, we use HTML DOM Input Range Object to implement the trackbar, which is shown as below.
@note <input> elements with type="range" are not supported in Internet Explorer 9 and earlier versions.
You can create an <input> element with type="range" with the document.createElement() method:
@code{.js}
let x = document.createElement('INPUT');
x.setAttribute('type', 'range');
@endcode
You can access an <input> element with type="range" with getElementById():
@code{.js}
let x = document.getElementById('myRange');
@endcode
As a trackbar, the range element need a trackbar name, the default value, minimum value, maximum value,
step and the callback function which is executed every time trackbar value changes. The callback function
always has a default argument, which is the trackbar position. Additionally, a text element to display the
trackbar value is fine. In our case, we can create the trackbar as below:
@code{.html}
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"/>
@endcode
Finally, we can use the trackbar value in the callback function, blend the two images, and display the result.
@code{.js}
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();
@endcode
@sa cv.addWeighted
Try it
------
\htmlonly
<iframe src="../../js_trackbar.html" width="100%"
onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
\endhtmlonly
|
