摘要：
JavaScript写法类似于C++写法。--两张图片格式为左浮动，处在一行--˃.InputOutput{float:left;margin:10px;}opencv.jsisloading...srcImgdstImg˂!
JavaScript 写法类似于 C++ 写法。
相关内容详细介绍请移步官网：【https://docs.opencv.org/3.3.1/de/d06/tutorial_js_basic_ops.html】
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>copyBorders</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">srcImg<input type="file"id="inputFile"name="file"/></div>
<img id="srcImg"alt="No Image"/>
</div>
<!--结果展示区域-->
<div class="InputOutput">
<div class="caption">dstImg</div>
<canvas id="dstImg"></canvas>
</div>
<!--扩展图片边界，并在 canvas 中显示-->
<script type="text/javascript">
<!--读入图片-->let imgElement=document.getElementById("srcImg");
let fileElement=document.getElementById("inputFile");
fileElement.addEventListener("change",
(e) =>{imgElement.src =URL.createObjectURL(e.target.files[0]);},
false);
<!--扩展边界-->imgElement.onload=function(){
let src=cv.imread(imgElement);
let dst = newcv.Mat();
let s = newcv.Scalar(255, 0, 0, 255);
cv.copyMakeBorder(src, dst, 10, 10, 10, 10, cv.BORDER_CONSTANT, s);
cv.imshow("dstImg", dst);
src.delete();
dst.delete();
};
<!--成功加载 opencv.js 后，status 标签会显示“opencv.js is ready.”-->
functiononOpenCvReady(){
document.getElementById("status").innerHTML="opencv.js is ready.";
}
</script>
<script async src="opencvjs/opencv.js"onload="onOpenCvReady();"type="text/javascript"></script>
</body>
</html>效果演示：
