我先吐槽一下，这个安装过程实在太麻烦了，不想折腾的人不配玩linux, 之前安装过opencv,是3.3.0，2017年下载的，现在已经是3.4.0版本了，我主要要的是新版本里的js接口，所以卸载了重新安装．因为之前是直接在官网下载的压缩包，所以更新的话需要卸载之前的版本，所以建议入果想要下载opencv的话，最好用git,这样更新方便些．不说了，这篇文章主要讲解我在编译opencvjs时遇到的错误，对于opencv的安装和编译，比较简单，我会简单提到的，希望想要了解opencvjs的小伙伴能少走些弯路．这里提供Opencvjs的官网安装介绍Opencvjs
环境及工具
ubuntu 16.04
opencv3.4.x
opencv安装编译
这里说句题外话，如果只想用opencv的话，原声的语言是c++,但是比较麻烦，建议使用python,不用去官网下载，直接用Anaconda下载opencv-python就行，import cv2就ok!
下面的命令的前提要有cmake,如果没有则sudo apt install cmake
git clone https://github.com/opencv/opencv.git
cd opencv
mkdir build
cd build
cmake ..
make #(此命令后可以加-j4或-j8参数，回快一点)
make install
现在来解释一下上面的命令．因为是第二次安装了，所以没有出现什么问题，可能会有依赖的问题，比如python,gcc,libdev等等，如果后来的小伙伴在安装中出现问题，欢迎在文章后面留言，我们可以讨论．
先用git克隆opencv的库，然后进入opencv的目录，在opencv这个目录（可能你的不叫这个，如果是解压zip的话），中你会看到一个cmake文件夹和一个CMakeList.txt文件，只要右CMakeList文件就行，在当前目录下创建一个build文件夹，这个名字你随意命名，这个目录是用来存放编译后的文件的．cd build 后执行cmake ..
make 来编译这个项目，然后就是安装啦，make install,这个会花一定时间．．．
ｏｋ，ｏｐｅｎｃｖ就安装完了．如果在make时出错，记得把CmakeList所在目录中**新生成的文件**都删掉！
opencvjs的编译安装
如下步骤是编译opencvjs,如果你不用js的话，这里就不用看了．
Emscripten的下载和配置
这里来安装Emscripten, opencv官网是先安装这个的，其实顺序不影响，这个是js的一个编译工具而已．Emscripten官网
安装方法有两种
1. git clone https://github.com/juj/emsdk.git
2. 直接下载zip包
注意：这里下载的是SDK,就是Emscripten的工具包，不是编译器本身，下载是注意操作系统的区别
下面是配置了，这个过程比较麻烦，操作不难主要是比较容易出错，我就是在这块花时间的．
在linux中要提前安装依赖
sudo apt-get install python2.7
sudo apt-get install nodejs
sudo apt-get install cmake
sudo apt-get install default-jre然后是Emscripten的安装
./emsdk update
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
echo ${EMSCRIPTEN}
这个过程中aws和github上下载库，比较费时，并且特别容易出错,所以不要放弃，哈哈哈，多试几次，一定要保证网络要好．当最后一个命令返回Emscripten的path后证明emscripten安装完成，但能不能用还不一定，为什么，接着看．．
./emsdk update
这里忘截图了，抱歉哈，只要没有Error就行，记着每一步都不能有错
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
echo ${EMSCRIPTEN}
如果看到如下效果证明安装成功
opencvjs的编译
python ./platforms/js/build_js.py build_js
解释一下这个命令的意思，因为你在下载和编译完opencv后platforms/js目录在是没有opencvjs这个文件的，不要用emscripten把整个项目从c编译成js，这就是 WebAssembly的伟大了．用python指向build_js.py这个文件来启动编译器来编译，然后把编译后的项目放到后面这个build_js文件目录下．这里注意一下如果在上一步你没有打印出emscripten的path,但安装成功了，这步编译是要指定emscrioten的path,参数使用可以参考build_js.py –help.
这一步其实是出错最多的地方，目前我把我遇到的两个问题列出来：（当然还有一些小错误，）
1.没有找到emcc,
这个你可以看看你的emscripten目录里有没有这个程序，这个其实有点向gcc,如果没有的话，那么咋办？下载呗！https://github.com/kripken/emscripten，这个地址去下载．可能有小伙伴会问刚才下载的是什么？其实第一次下载的是emsdk，然后用emsdk来下载emscripten的，前者是软件包，后者是编译器．这里有问题是用sdk下载编译器时出错了，反正没报错但是就是软件不对，你可去github上去下载软件然后解压后把emscripten中的目录都替换掉就行．
２．
Traceback(most recent call last)
File build_js.py ,line215, in module
builder=Builder(args)
File build_js.py ,line84, in __init__self.emcc_version=
determine_emcc_version(self.emscripten_dir)
File build_js.py ,line63, in determine_emcc_versionm=
re.match(remcc.*(d+.%d+.d+),ret,flags=re.IGNORECASE)
File /home/yuan/anaconda3/lib/python3.6/re.py ,line172,in match
return_compile(pattern,flags).match(string)
TypeError cannot use a string pattern on a bytes-like object还记得之前linux上安装的前提吗？下载的是python2,而我这里用的是python3,所以出错，改为python2 ./platforms/js/build_js.py build_js就形
这里，opencvjs就编译完成了．这是你就可以在js目录先的build_js/bin中看到opencv.js ,opencv_js.js , opencvja.wasm.
测试
使用官网的一个例子，显示图片，代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello 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">
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};
function onOpenCvReady() {
document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>注意这里opencv.js的路径是你自己的路径
测试时遇到的问题
１．这是在chromium浏览器上出现的错误，就是跨越访问错误,和请求错误
解决办法，不要用chromium浏览器，我没用chrome实验，我机子上没安装哈哈！
用firefox打开就没事了．
２．在firefox上遇到跨域错误，原因是你在代码里用来绝对路径，改为相对路径，并把index,html放在opencv.js的同一个目录下就行了．这里就不上图了．