因為之前接觸過 C++ 語言的 opencv，所以原理就不介紹了，只記錄一下 js 語言的寫法。
官網相關內容介紹：【https://docs.opencv.org/3.3.1/df/d24/tutorial_js_image_display.html】
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toGray</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 gray = new cv.Mat(); cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY); cv.imshow('dstImg', gray); src.delete(); dst.delete(); }; <!--成功加載 opencv.js 后，status 標簽會顯示“opencv.js is ready.”-->
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>
效果展示：
