毕设是基于opecv的车牌自动识别系统，身为一个正在学习前端的程序媛，想着拿js搞搞吧。
opencv.js这个文件官网上是不提供的，是要自己去编译的，官网上有怎么编译的文档。
这个是我在谷歌中翻译的文档，为了方便自己以后查看，顺便也给有需要的人提供帮助。毕竟现在搞opencv.js的文档很少。
原版教程地址：https://docs.opencv.org/3.4.1/d5/d10/tutorial_js_root.html
1、Opencv.js和教程简介
OpenCV的
OpenCV于1999年由Gary Bradski在英特尔创建。第一个版本于2000年发布.Vadim Pisarevsky加入了Gary Bradski来管理英特尔的俄罗斯软件OpenCV团队。2005年，OpenCV被用于Stanley; 赢得2005年DARPA大挑战的车辆。后来，在Willow Garage的支持下，其积极的发展继续，Gary Bradski和Vadim Pisarevsky领导该项目。OpenCV现在支持与计算机视觉和机器学习相关的众多算法，并且正在日益扩展。
OpenCV支持各种编程语言，如C ++，Python和Java，可在不同的平台上使用，包括Windows，Linux，OS X，Android和iOS。基于CUDA和OpenCL的高速GPU操作接口也在积极开发中。OpenCV.js将OpenCV带入开放的Web平台，并使其可供JavaScript程序员使用。
OpenCV.js：JavaScript程序员的OpenCV
Web是最普遍存在的开放计算平台。通过在每个浏览器中实施HTML5标准，Web应用程序能够使用HTML5视频标签呈现在线视频，通过WebRTC API捕获网络摄像头视频，并通过画布API访问视频帧的每个像素。随着可用的多媒体内容的丰富，Web开发人员需要JavaScript中的各种图像和视觉处理算法来构建创新的应用程序。此要求对于Web上的新兴应用程序更为重要，例如Web虚拟现实（WebVR）和增强现实（WebAR）。所有这些用例都要求在Web上有效地实现计算密集型视觉内核。
Emscripten是一个LLVM到JavaScript的编译器。它需要LLVM bitcode - 可以使用clang从C / C ++生成，并将其编译为可以直接在Web浏览器中执行的asm.js或WebAssembly。。Asm.js是一个高度可优化的低级JavaScript子集。Asm.js可在JavaScript引擎中实现提前编译和优化，从而提供接近本机的执行速度。WebAssembly是一种新的可移植，大小和加载时间有效的二进制格式，适合编译到Web。WebAssembly旨在以原生速度执行。WebAssembly目前被W3C设计为开放标准。
OpenCV.js是针对Web平台的OpenCV函数的选定子集的JavaScript绑定。它允许具有多媒体处理功能的新兴Web应用程序受益于OpenCV中提供的各种视觉功能。OpenCV.js利用Emscripten将OpenCV函数编译为asm.js或WebAssembly目标，并为Web应用程序提供JavaScript API以访问它们。该库的未来版本将利用Web上可用的加速API，如SIMD和多线程执行。
OpenCV.js最初是由加州大学欧文分校（UCI）的Parallel Architectures and Systems Group创建的，是由英特尔公司资助的研究项目。作为Google Summer of Code 2017计划的一部分，OpenCV.js进一步改进并集成到OpenCV项目中。
OpenCV.js教程
OpenCV引入了一组新的教程，将指导您完成OpenCV.js中提供的各种功能。本指南主要关注OpenCV 3.x版本。
OpenCV.js教程的目的是：
-
帮助OpenCV在Web开发中的适应性
-
帮助Web社区，开发人员和计算机视觉研究人员以交互方式访问各种基于Web的OpenCV示例，以帮助他们了解特定的视觉算法。
由于OpenCV.js能够直接在浏览器中运行，因此OpenCV.js教程网页具有直观性和交互性。例如，使用WebRTC API并评估JavaScript代码将允许开发人员更改CV函数的参数，并在网页上进行实时CV编码以实时查看结果。
建议您先了解JavaScript和Web应用程序开发，以了解本指南。
贡献者
下面是OpenCV.js绑定和教程的贡献者列表。
-
Sajjad Taheri（初始版本的建筑师和加州大学欧文分校的GSoC导师）
-
潘从祥（GSoC学生，上海交通大学）
-
宋刚（GSoC学生，上海交通大学）
-
甘文耀（上海交通大学学生实习生）
-
Mohammad Reza Haghighat（英特尔公司项目发起人和赞助商）
-
胡宁新（学生导师，英特尔公司）
GUI功能
-
学习加载图像并将其显示在Web中
目标
-
了解如何阅读图像以及如何在网络中显示图像。
阅读图片
OpenCV.js将图像保存为cv.Mat类型。我们使用HTML canvas元素将cv.Mat传输到Web或反向传输。ImageData接口可以表示或设置canvas元素区域的基础像素数据。
也可以看看
有关更多详细信息，请参阅画布文档。
首先，从canvas创建一个ImageData obj：
let canvas = document.getElementById（canvasInputId）;
let ctx = canvas.getContext（'2d'）;
let imgData = ctx.getImageData（0,0，canvas.width，canvas.height）;
然后，使用cv.matFromImageData构造一个cv.Mat：
let src = cv.matFromImageData（imgData）;
注意
由于canvas仅支持具有连续存储的8位RGBA图像，因此cv.Mat类型为cv.CV_8UC4。它与原生OpenCV不同，因为本机imread和imshow返回并显示的图像具有以BGR顺序存储的通道。
显示图像
首先，将src的类型转换为cv.CV_8UC4：
让dst = new cv.Mat（）;
// scale和shift用于将数据映射到[0,255]。
src.convertTo（dst，cv.CV_8U，scale，shift）;
// ***是GRAY，RGB或RGBA，根据src.channels（）是1,3或4。
cv.cvtColor（dst，dst，cv.COLOR _ *** 2RGBA）;
然后，从dst新建一个ImageData obj：
let imgData = new ImageData（new Uint8ClampedArray（dst.data，dst.cols，dst.rows）;
最后，显示它：
let canvas = document.getElementById（canvasOutputId）;
let ctx = canvas.getContext（'2d'）;
ctx.clearRect（0,0，canvas.width，canvas.height）;
canvas.width = imgData.width;
canvas.height = imgData.height;
ctx.putImageData（imgData，0,0）;
在OpenCV.js中
OpenCV.js使用上述方法实现图像读取和显示。
我们使用cv.imread（imageSource）从html canvas或img元素中读取图像。
参数
| ImageSource | canvas元素或id，或img元素或id。 |
返回
带有以RGBA顺序存储的通道的mat。
我们使用cv.imshow（canvasSource，mat）来显示它。该功能可根据其深度缩放mat：
-
如果mat是8位无符号，则按原样显示。
-
如果mat是16位无符号或32位整数，则像素除以256.即，值范围[0,255 * 256]被映射到[0,255]。
-
如果mat是32位浮点，则像素值乘以255.也就是说，值范围[0,1]被映射到[0,255]。
参数
| canvasSource | canvas元素或id。 |
| mat | mat要显示。 |
上面的图像读取和显示代码可以简化如下。
let img = cv.imread（imageSource）;
cv.imshow（canvasOutput，img）;
img.delete（）;
试试吧
-
学习从相机中捕捉视频并进行播放
目标
-
学习从相机捕捉视频并进行显示。
从相机捕获视频
通常，我们必须用相机捕捉直播。在OpenCV.js中，我们使用WebRTC和HTML canvas元素来实现它。让我们从相机（内置或USB）捕获视频，将其转换为灰度视频并显示它。
要捕获视频，您需要在网页中添加一些HTML元素：
-
<video>直接显示来自摄像头的视频
-
一个<canvas>，用于逐帧将视频传输到画布ImageData
-
另一个<canvas>来显示OpenCV.js获取的视频
首先，我们使用WebRTC navigator.mediaDevices.getUserMedia来获取媒体流。
let video = document.getElementById（“videoInput”）; // video是视频标记的ID
navigator.mediaDevices.getUserMedia（{video：true，audio：false}）
.then（function（stream）{
video.srcObject = stream;
video.play（）;
}）
.catch（function（err）{
console.log（“发生错误！”+错误）;
}）;
注意
从视频文件中捕获视频时，此功能是不必要的。但请注意，HTML视频元素仅支持Ogg（Theora），WebM（VP8 / VP9）或MP4（H.264）的视频格式。
播放视频
现在，浏览器获取相机流。然后，我们使用Canvas 2D API的CanvasRenderingContext2D.drawImage（）方法将视频绘制到画布上。最后，我们可以使用图像入门中的方法来读取和显示画布中的图像。对于播放视频，应在每延迟毫秒执行cv.imshow（）。我们建议使用setTimeout（）方法。如果视频是30fps，延迟毫秒应为（1000/30 - processing_time）。
let canvasFrame = document.getElementById（“canvasFrame”）; // canvasFrame是<canvas>的id
let context = canvasFrame.getContext（“2d”）;
让src = new cv.Mat（height，width，cv.CV_8UC4）;
let dst = new cv.Mat（height，width，cv.CV_8UC1）;
const FPS = 30;
function processVideo（）{
let begin = Date.now（）;
context.drawImage（视频，0,0，宽度，高度）;
src.data.set（context.getImageData（0,0，width，height）.data）;
cv.cvtColor（src，dst，cv.COLOR_RGBA2GRAY）;
cv.imshow（“canvasOutput”，dst）; // canvasOutput是另一个<canvas>的id;
//安排下一个。
让delay = 1000 / FPS - （Date.now（） - begin）;
setTimeout（processVideo，delay）;
}
//安排第一个。
setTimeout（processVideo，0）;
OpenCV.js 使用上述方法实现cv.VideoCapture（videoSource）。您无需手动添加隐藏的canvas元素。
参数
| videoSource | 视频ID或元素。 |
返回
我们使用read（图像）来获取视频的一帧。出于性能原因，图像应使用cv.CV_8UC4类型和与视频相同的大小构建。
参数
| 图片 | 具有cv.CV_8UC4类型且与视频大小相同的图像。 |
上面的播放视频代码可以简化如下。
let src = new cv.Mat（height，width，cv.CV_8UC4）;
let dst = new cv.Mat（height，width，cv.CV_8UC1）;
let cap = new cv.VideoCapture（videoSource）;
const FPS = 30;
function processVideo（）{
let begin = Date.now（）;
cap.read（SRC）;
cv.cvtColor（src，dst，cv.COLOR_RGBA2GRAY）;
cv.imshow（“canvasOutput”，dst）;
//安排下一个。
让delay = 1000 / FPS - （Date.now（） - begin）;
setTimeout（processVideo，delay）;
}
//安排第一个。
setTimeout（processVideo，0）;
注意
记得在停止后删除src和dst。
试试吧
视频捕获示例
单击开始/停止按钮以开始或停止摄像头捕获。
所述videoInput是用作OpenCV.js输入一个<video>元素。所述canvasOutput是用作OpenCv.js输出一个<画布>元素。
启动视频时将执行<textarea>的代码。您可以修改代码以进行更多调查。
-
上面仅仅是读取图像和视频的帮助手册：目前博主正在读代码，还未理解透彻，读视频的那个代码好像有点问题。（啊啊啊，还有两个半周做毕设，尽我所能吧）。下一篇介绍简单的读取图片和视频，未完待续，敬请期待……
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
