向应用程序添加追踪栏

目标

• 使用 HTML DOM 输入范围对象向应用程序添加追踪栏。

代码演示

在此，我们将创建一个简单的应用程序，将两张图片混合。我们将让用户使用追踪栏输入权重。

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

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

然后，我们使用 HTML DOM 输入范围对象实现追踪栏，如下所示。

注意

在 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');

作为追踪栏，范围元素需要追踪栏名称、默认值、最小值、最大值、步长以及每次追踪栏值发生变化时执行的回调函数。回调函数始终有一个默认参数，即追踪栏位置。此外，一个用于显示追踪栏值的文本元素很好。在我们的示例中，我们可以按如下方式创建追踪栏

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

尝试