在您的应用程序中添加轨迹条

目标

• 使用 HTML DOM 输入范围对象向您的应用程序添加轨迹条。

代码演示

在这里，我们将创建一个简单的应用程序，用于混合两张图像。我们将让用户使用轨迹条输入权重。

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

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

然后，我们使用 HTML DOM 输入范围对象来实现轨迹条，如下所示。

注意

类型为“range”的<input> 元素在 Internet Explorer 9 和更早版本中不受支持。

您可以使用 document.createElement() 方法创建一个类型为“range”的<input> 元素。

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

您可以使用 getElementById() 访问类型为“range”的<input> 元素。

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

作为轨迹条，范围元素需要一个轨迹条名称、默认值、最小值、最大值、步长以及每次轨迹条值更改时执行的回调函数。回调函数始终具有一个默认参数，即轨迹条位置。此外，显示轨迹条值的文本元素也很好。在我们的例子中，我们可以创建如下所示的轨迹条：

权重：<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

试一试