向您的应用程序添加轨迹栏

目标

• 使用 HTML DOM Input Range 对象向你的应用添加滑动条。

代码示例

在这里，我们将创建一个简单的应用来混合两张图片。我们将让用户使用滑动条来输入权重。

首先，我们需要创建三个 canvas 元素：两个用于输入，一个用于输出。请参考教程 图像入门。

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

然后，我们使用 HTML DOM Input Range 对象来实现滑动条，如下所示。

注意

Internet Explorer 9 及更早版本不支持 type="range" 的 <input> 元素。

你可以使用 document.createElement() 方法创建一个 type="range" 的 <input> 元素

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

你可以使用 getElementById() 方法访问 type="range" 的 <input> 元素

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

作为一个滑动条，range 元素需要一个滑动条名称，默认值，最小值，最大值，步长和回调函数，每次滑动条值改变时都会执行该回调函数。回调函数总是有一个默认参数，即滑动条位置。此外，一个用于显示滑动条值的文本元素也是可以的。在我们的例子中，我们可以如下创建滑动条

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

最后，我们可以在回调函数中使用滑动条的值，混合两张图片，并显示结果。

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

试试看