【opencv.js】添加滑动条
2021-03-18 22:27
标签：info head pen als fun 文件加载 function nop com 相关内容详细介绍请移步官网：【https://docs.opencv.org/3.3.1/d5/df3/tutorial_js_trackbar.html】 代码实现： 效果展示： 【opencv.js】添加滑动条 标签：info head pen als fun 文件加载 function nop com 原文地址：https://www.cnblogs.com/bjxqmy/p/12763254.htmlDOCTYPE html>
html>
head>
meta charset="UTF-8">
title>Insert title heretitle>
style type="text/css">
.InputOutput{
float: left;
margin: 10px;
}
style>
head>
body>
p id="status">opencv.js is loading...p>
div class="InputOutput">
div class="caption">srcImg1input type="file" id="inputFile1"/>div>
img id="srcImg1" alt="No Image"/>
div>
div class="InputOutput">
div class="caption">srcImg2input 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>
