画像を読み出して出力する方法についてopencv.js話では、この時点では、中国の人々の利益を焼き公式のチュートリアルを続行します。
プログラムテンプレートopencv.js
もう1つは全体のhtmlファイルで見ることができますは、JavaScriptだけでなく、ブロックで、プログラムブロックのOpenCV、まず、それだけでライブラリーではなく、アプリケーションフレームワークをOpenCVの、ということを明確に理解する必要があります内容は比較的少なく、明らかです。公式小さなルーチンによれば、プログラムは、実質的にこのopencv.js構成に要約することができる：
図は、他の必要性に加えて、直接ステップ2以外のコード部分には、直感的ではない、と見なすことができます固定テンプレート！
<!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 src=cv.imread(imgSrcElement);
let dst = new cv.Mat(); //这个是输出矩阵
// 处理图像（步骤2）
//这里就是opencv.js的工作区
//其他地方和opencv.js的图像处理都莫得关系
//需要的处理代码按逻辑放在这一块里就可以
//如果创建了中间矩阵或矢量的话，也不要忘了在回调函数最后把堆的内存释放掉
// 输出获取矩阵（步骤3）
cv.imshow('canvasOutput',dst);
// 调用delete释放堆的内存
src.delete();
dst.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>
基礎となるオペレーティングopencv.jsの一部
変数opencv.js行列を構築する方法：
// 1. 默认构造函数
let mat = new cv.Mat();
// 2. 2维数组型，参数为尺寸 类型
let mat = new cv.Mat(size, type);
// 3. 2维数组型，参数为行数 列数 类型
let mat = new cv.Mat(rows, cols, type);
// 4. 2维数组型，参数为行数 列数 类型 初始化颜色
let mat = new cv.Mat(rows, cols, type, new cv.Scalar());
// 1. 全为0的矩阵
let mat = cv.Mat.zeros(rows, cols, type);
// 2. 全为1的矩阵
let mat = cv.Mat.ones(rows, cols, type);
// 3. 创建单位矩阵
let mat = cv.Mat.eye(rows, cols, type);
メソッドopencv.jsコピー行列変数：
// 1. 直接复制
let dst = src.clone();
// 2. 只复制掩码中指示的条目
src.copyTo(dst, mask);
方法のopencv.js変換行列変数の種類：
src.convertTo(dst, rtype);//参数为目标矩阵 目标类型
opencv.js ROIを描きます：
ROIが描かれ、これは効果的に画像処理の計算量を減らすことができ、OpenCVの基本的な動作です。ROI関数をプロットするプログラムテンプレート2にのみ必要なステップは、長方形ROIを達成することができる描画、次のコードを書き込みされます。
let rect = new cv.Rect(100,100,200,200);//矩阵左上角坐标为（100,100），右下角坐标为（200,200）
dst = src.roi(rect);
下に示すような結果を操作：
次のようにすべてのコードは次のとおりです。
<!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 src=cv.imread(imgSrcElement);
let dst = new cv.Mat();
// 处理图像（步骤2）
let rect = new cv.Rect(100,100,200,200);
dst = src.roi(rect);
// 输出获取矩阵（步骤3）
cv.imshow('canvasOutput',dst);
// 调用delete释放堆的内存
src.delete();
dst.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>
プロフィールを充填opencv.js：
ステップ2で、次のコードを追加するだけの必要性を満たす輪郭：
let s = new cv.Scalar(255,0,0,255);
cv.copyMakeBorder(src,dst,10,10,10,10,cv.BORDER_CONSTANT,s);//上，下，左，右方向填充
以下のように結果：
次のようにすべてのコードは次のとおりです。
<!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 src=cv.imread(imgSrcElement);
let dst = new cv.Mat();
// 处理图像（步骤2）
let s = new cv.Scalar(255,0,0,255);
cv.copyMakeBorder(src,dst,10,10,10,10,cv.BORDER_CONSTANT,s);//上，下，左，右方向填充
// 输出获取矩阵（步骤3）
cv.imshow('canvasOutput',dst);
// 调用delete释放堆的内存
src.delete();
dst.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>
opencv.jsマトリクス型変換（グレースケール）：
通常原画像マトリックスから画像処理の前に、通常、RGBカラーモードをグレースケールに変換されます。階調パターン計算少ないチャネルので、計算量を低減することができます。もちろん、他に関与する色識別プログラムの必要性を述べました。
グレースケール変換が唯一のステップ2で、次のコードを追加する必要があります。
cv.cvtColor(src,dst,cv.COLOR_RGBA2GRAY,0);//最后一个参数为0的话通道数量由src自动生成
示すように、結果：
変換行列をスケーリングopencv.js：
opencv.js支持体は変換パラメータをスケーリングする3つの形態：cv.INTER_AREA、cv.INTER_CUBIC、cv.INTER_LINEAR
例の立方形では、原画像に長さ200に減少し、幅200ステップで必要とされる2次のコードを記述します。
let dsize = new cv.Size(200,200);
cv.resize(src,dst,dsize,0,0,cv.INTER_CUBIC);
示すように、結果：
cv.INTER_AREAへのパラメータは、以下の絵：
次の図のようにcv.INTER_LINEARへのパラメータ：
