opencv.js 的一些基礎知識，可以在【https://zhuanlan.zhihu.com/p/50428738】這篇文章以及 opencv 官網 【https://docs.opencv.org/3.3.1/df/d0a/tutorial_js_intro.html】上了解，這里不做贅述。
簡單說一下創建 opencv.js 項目的步驟：
- 通過好多軟件，將 opencv 庫編譯成 opencv.js。
- 在項目中引用編譯好的 opencv.js。
- 編寫代碼，運行。
opencv.js 類似於 C++ 中的 STL，它為我們提供 opencv 常見函數的接口。
但 opencv 官網並沒有提供提供 opencv.js 下載地址，需要用戶在官網下載 opencv 庫后，自行編譯為 opencv.js。
編譯過程較繁瑣，所以我們直接使用知乎大神編譯好的。
版本為 opencv3.4.2，下載地址:【https://pan.baidu.com/s/1ZMkhcPw31hmW9qOeeOr7fQ】密碼:r5wh（感謝大佬）。
第一步，將下載好的文件復制到 javaweb 項目中
第二步，創建 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); cv.imshow('dstImg', src); src.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>
第三步，保存，運行
說是快速創建，就真的快速創建，原理都不講的（狗頭保命）。
附上 opencv 官網這部分內容的詳細介紹：【https://docs.opencv.org/3.3.1/d0/d84/tutorial_js_usage.html】