opencv.js 之官网教程翻译加代码

毕设是基于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教程的目的是:

  1. 帮助OpenCV在Web开发中的适应性

  2. 帮助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不同,因为本机imreadimshow返回并显示的图像具有以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 之官网教程翻译加代码_第1张图片

  • 视频入门

    学习从相机中捕捉视频并进行播放

目标

  • 学习从相机捕捉视频并进行显示。

从相机捕获视频

通常,我们必须用相机捕捉直播。在OpenCV.js中,我们使用WebRTC和HTML canvas元素来实现它。让我们从相机(内置或USB)捕获视频,将其转换为灰度视频并显示它。

要捕获视频,您需要在网页中添加一些HTML元素:

  • 一个,用于逐帧将视频传输到画布ImageData

  • 另一个来显示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是的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是另一个的id;

//安排下一个。

让delay = 1000 / FPS - (Date.now() - begin);

setTimeout(processVideo,delay);

}

//安排第一个。

setTimeout(processVideo,0);

OpenCV.js 使用上述方法实现cv.VideoCapture(videoSource)您无需手动添加隐藏的canvas元素。

参数

videoSource

视频ID或元素。

返回

cv.VideoCapture实例

我们使用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输入一个

启动视频时将执行