書き込みプログラムにOpencv.jsエンジニアというのJavaScript、HTMLファイル内の画像処理領域のフロントエンド。OpenCVのコードを書く同様の言語としてPythonとJSの経験は、より適切だったでしょう。
すべての前に、JavaScriptとOpenCVのを理解する必要があり、OpenCVのを学ぶ（C ++どこにある誰の世界で最高のを）学ぶためにはるかに簡単にPython言語を、お勧めします。次は、基本的なプロジェクトopencv.jsを含むデータベースを分析するための方法を構成する方法で爆発しました。
Opencv.JSライブラリ
opencv.jsは、ライブラリですが、ライブラリ自体は（わずか1ブロックの少しの例を与える）の公式文書を提供していません。自然opencv.jsライブラリは、OpenCVのライブラリのC ++版、コンパイル済みのJSファイルです。全体のプロセスはより複雑である、それはJSファイルをコンパイル直接ダウンロード他の人をお勧めします。
JSライブラリは、すべての外部JSファイルのhtmlファイルがフォルダ内のHTMLファイルとopencv.jsのフロントエンドの基本的な操作にリンクされた後に、快適に持ってすることができます。
次のようにこの外国刑のjsファイルを使用してコードのhtmlファイルは以下のとおりです。
<script async src="opencv.js" type="text/javascript"></script>
非同期IOは、操作がブロックにプログラムを引き起こすことはありませんので、とき、表現は非同期ロードの特性を表現したものです。進むべき道opencv.js使用することができ、ロードされたライブラリファイルの後。
あなたはopencv.jsライブラリがロードされたときに、視覚的に確認したい場合は、コールバック関数にonloadイベントコード内のプロパティ、ポイントを増加させ、そして同じ非同期メカニズムでNode.jsのことができます。
<script async src="opencv.js" onload="opencvLoad()" type="text/javascript"></script>
出力画像は読み込みOpencv.JS
画像処理プロセスは、一般的にそれは何ですか？入力画像処理方法2.コールXX 3.出力画像：ビューは何も以上のプログラマの視点から。jsの中に真のより多くの何もありません。
まず、入力画像です。機能を読み取るopencv.js画像ファイルは、内部関数imreadのJSに対して直接ではなく、第一のHTMLファイルによりファイルを読み取る操作を読み、その後関数imread変数でマトリックスに導入します：
let mat=cv.imread(imgSrcElement);
ステップ2は、画像処理は、ライブラリの関数を呼び出すことによって行われ、この変更ではありません。
ステップ3も特別です。OpenCVの他の版で（画像の処理後）変数行列を出力する、出力ウィンドウを配置することができます。しかし、単に画像出力を実現するためのコンポーネントを使用して、新しいHTMLウィンドウ、HTMLキャンバスが作成することはできません。組み立てもHTMLキャンバスとして知られているキャンバスは、ページ内の新しいイメージをマッピングに専念します：
cv.imshow('canvasOutput',mat);
コード上に見られるように、opencv.js新しいマトリックスは、可変成分キャンバスによって表示されます。
HTMLページ：
IMG要素は、最初のページにあるファイルアップロードコンポーネントに追加されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OpenCV.js</title>
</head>
<body>
<h2>Program of OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
</div>
</body>
</html>
そして、キャンバスのコンポーネントを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<style>
.inputoutput{
float: left;/*左侧浮动展示*/
}
</style>
</head>
<body>
<h2>Program of OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
</body>
</html>
JavaScriptコード：
次のようにJavaScriptのコードは次のとおりです。
<script type="text/javascript">
var imgSrcElement=document.getElementById('imageSrc');
var imageInput=document.getElementById('fileInput');
imageInput.addEventListener('change',(e)=>{
imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
})
// 因为是异步操作，所以需要onload等图像加载完毕后执行，也是回调
imgSrcElement.onload=function(){
// 读取获取矩阵（步骤1）
let mat=cv.imread(imgSrcElement);
// 输出获取矩阵（步骤3）
cv.imshow('canvasOutput',mat);
// 调用delete释放堆的内存
mat.delete();
}
var opencvLoad=function(){
document.getElementById('status').innerHTML='opencv is ready';//回调函数，用来显示opencv.js加载完成
}
</script>
<!-- 异步加载，不对程序进行阻塞 -->
<script async src="opencv.js" onload="opencvLoad()" type="text/javascript"></script>
結果：
あなたはすでにロードopencv.js見ることができます赤いボックスで、操作を開始することができます。お使いのコンピュータから画像を検索し、ファイルを選択]をクリックします。
期待に沿った結果。キャンバスキャンバスのソースファイルと出力と同じイメージで。
次のように全体のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
<style>
.inputoutput{
float: left;
}
</style>
</head>
<body>
<h2>Program of OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image" />
<div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput" ></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<script type="text/javascript">
var imgSrcElement=document.getElementById('imageSrc');
var imageInput=document.getElementById('fileInput');
imageInput.addEventListener('change',(e)=>{
imgSrcElement.src=URL.createObjectURL(e.target.files[0]);
})
// 因为是异步操作，所以需要onload等图像加载完毕后执行，也是回调
imgSrcElement.onload=function(){
// 读取获取矩阵（步骤1）
let mat=cv.imread(imgSrcElement);
// 输出获取矩阵（步骤3）
cv.imshow('canvasOutput',mat);
// 调用delete释放堆的内存
mat.delete();
}
var opencvLoad=function(){
document.getElementById('status').innerHTML='opencv is ready';//回调函数，用来显示opencv.js加载完成
}
</script>
<!-- 异步加载，不对程序进行阻塞 -->
<script async src="opencv.js" onload="opencvLoad()" type="text/javascript"></script>
</body>
</html>
