OpenCV
4.10.0
Open Source Computer Vision
|
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 Getting Started with Images.
Then, we use HTML DOM Input Range Object to implement the trackbar, which is shown as below.
You can create an <input> element with type="range" with the document.createElement() method:
You can access an <input> element with type="range" with getElementById():
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:
Finally, we can use the trackbar value in the callback function, blend the two images, and display the result.