【opencv.js】添加滑动条

相关内容详细介绍请移步官网:【https://docs.opencv.org/3.3.1/d5/df3/tutorial_js_trackbar.html

代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <!-- 将图片设置为左浮动 -->
    <style type="text/css">
        .InputOutput{
            float: left;
            margin: 10px;
        }
    </style>
</head>
<body>
    <!-- 若 opencv.js 文件加载成功,显示 opencv.js is ready. -->
    <p id="status">opencv.js is loading...</p>
    
    <!-- 上传图片区域 -->
    <div class="InputOutput">
        <!-- 文件选择框 -->
        <div class="caption">srcImg1<input type="file" id="inputFile1"/></div>
        <!-- 图像展示区 -->
        <img id="srcImg1" alt="No Image"/>
    </div>
    <div class="InputOutput">
        <div class="caption">srcImg2<input type="file" id="inputFile2"/></div>
        <img id="srcImg2" alt="No Image"/>
    </div>
    
    <!-- 显示结果区域 -->
    <div class="InputOutput">
        <div class="caption">dstImg
          <!-- 滑动条 -->
          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"/>
        </div>
        <!-- 结果展示 -->
        <canvas id="dstImg"></canvas>
    </div>
    
    <!-- 功能实现代码 -->
    <script type="text/javascript">
          <!-- 读入图片 -->
        let imgElement1=document.getElementById("srcImg1");
        let imgElement2=document.getElementById("srcImg2");
        let fileElement1=document.getElementById("inputFile1");
        let fileElement2=document.getElementById("inputFile2");
        fileElement1.addEventListener("change",
                (e)=>{imgElement1.src=URL.createObjectURL(e.target.files[0]);},
                false);
        fileElement2.addEventListener("change",
                (e)=>{imgElement2.src=URL.createObjectURL(e.target.files[0]);},
                false);        
        
        <!-- 滑动条回调函数 -->
        function callback(){
            let trackbar = document.getElementById("trackbar");
            let weightValue = document.getElementById("weightValue");
            weightValue.setAttribute("value", trackbar.value);
            let alpha = trackbar.value/trackbar.max;
            let beta = ( 1.0 - alpha );
            let src1 = cv.imread(imgElement1);
            let src2 = cv.imread(imgElement2);
            let dst = new cv.Mat();
            cv.addWeighted( src1, alpha, src2, beta, 0.0, dst, -1);
            cv.imshow(‘dstImg‘, dst);
            weightValue.delete();
            trackbar.delete();
            dst.delete();
            src1.delete();
            src2.delete(); 
        }
        
        function onOpenCvReady(){
            document.getElementById("status").innerHTML="opencv.js is ready.";
        }
    </script>
    <script async src="opencvjs/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>

效果展示:

【opencv.js】添加滑动条