opencv.js编译

一. 官方版本

后面发现官方有给https://github.com/opencv/opencv/releases

 

 想查看支持哪些函数，即看./opencv-4.5.3/platforms/js/opencv_js.config.py

二.自己编译

参考https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html

1.安装emsdk

https://github.com/emscripten-core/emsdk

首先下载：

git clone https://github.com/emscripten-core/emsdk.git

安装：

cd emsdk
./emsdk install latest
./emsdk activate latest

最后一个命令后返回：

Next steps:
- To conveniently access emsdk tools from the command line,
  consider adding the following directories to your PATH:
    /var/user_download_data/remotedata/make_opencv_js/emsdk
    /var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin
    /var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten
- This can be done for the current shell by running:
    source "/var/user_download_data/remotedata/make_opencv_js/emsdk/emsdk_env.sh"
- Configure emsdk in your shell startup scripts by running:
    echo 'source "/var/user_download_data/remotedata/make_opencv_js/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile 

然后运行：

source ./emsdk_env.sh

现在重新尝试在103机器上安装，返回：

(base) [root@machine emsdk]# source ./emsdk_env.sh
Adding directories to PATH:
PATH += /var/user_download_data/remotedata/make_opencv_js/emsdk
PATH += /var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten
PATH += /var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin

Setting environment variables:
PATH = /var/user_download_data/remotedata/make_opencv_js/emsdk:/var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten:/var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin:/var/u01/hadoop/anaconda3/bin:/var/u01/hadoop/anaconda3/condabin:/sbin:/bin:/usr/sbin:/usr/bin:/usr/local/cuda-10.1/bin
EMSDK = /var/user_download_data/remotedata/make_opencv_js/emsdk
EM_CONFIG = /var/user_download_data/remotedata/make_opencv_js/emsdk/.emscripten
EMSDK_NODE = /var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin/node

然后发现有一个变量没有命名：

export EMSCRIPTEN=/var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten

这样运行下面的build_js.py时就不会报：

EMSCRIPTEN environment variable is not available. Please properly activate Emscripten SDK and consider using 'emcmake' launcher 

2.下载opencv

git clone https://github.com/opencv/opencv.git

运行：

(base) [root@machine make_opencv_js]# emcmake python ./opencv-4.5.3/platforms/js/build_js.py build_js 

报错：

build_js.py: error: unrecognized arguments: -DCMAKE_TOOLCHAIN_FILE=/var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR=/var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin/node
emcmake: error: 'python3 ./opencv-4.5.3/platforms/js/build_js.py build_js -DCMAKE_TOOLCHAIN_FILE=/var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR=/var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin/node' failed (returned 2)
(base) [root@machine make_opencv_js]# exit

然后我看了下./opencv-4.5.3/platforms/js/build_js.py文件

直接添加进这两个参数即可：

    parser.add_argument('-DCMAKE_TOOLCHAIN_FILE', default='', help='DCMAKE_TOOLCHAIN_FILE')
    parser.add_argument('-DCMAKE_CROSSCOMPILING_EMULATOR', default='', help="DCMAKE_CROSSCOMPILING_EMULATOR")

但是又报错：

CMake Error at CMakeLists.txt:27 (cmake_minimum_required):
  CMake 3.5.1 or higher is required.  You are running version 2.8.11


-- Configuring incomplete, errors occurred!
Traceback (most recent call last):
  File "./build_js.py", line 286, in <module>
    builder.config()
  File "./build_js.py", line 192, in config
    execute(cmd)
  File "./build_js.py", line 23, in execute
    raise Fail("Child returned: %s" % retcode)
__main__.Fail: Child returned: 1
emcmake: error: 'python ./build_js.py build_js -DCMAKE_TOOLCHAIN_FILE=/var/user_download_data/remotedata/make_opencv_js/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake -DCMAKE_CROSSCOMPILING_EMULATOR=/var/user_download_data/remotedata/make_opencv_js/emsdk/node/14.15.5_64bit/bin/node' failed (returned 1)

应该是cmake的版本太低了，更新新版本

现在是：

(base) [root@machine js]# cmake --version
cmake version 2.8.11

安装新的版本：

wget https://cmake.org/files/v3.9/cmake-3.9.2.tar.gz

然后：

cd cmake-3.9.2

./configure

make

sudo make install

然后这样子得到的cmake文件就能够使用了，更改build_js.py的：

    def get_cmake_cmd(self):
        cmd = [
            "cmake",
            "-DPYTHON_DEFAULT_EXECUTABLE=%s" % sys.executable,

为：

    def get_cmake_cmd(self):
        cmd = [
            "/var/user_download_data/remotedata/make_opencv_js/cmake-3.9.2/bin/cmake",
            "-DPYTHON_DEFAULT_EXECUTABLE=%s" % sys.executable,

 指定使用新版本的cmake

然后再运行：

emcmake python /var/user_download_data/remotedata/make_opencv_js/opencv-4.5.3/platforms/js/build_js.py build_js

就成功生成了：

OpenCV.js location: /var/user_download_data/remotedata/make_opencv_js/opencv-4.5.3/platforms/js/build_js/bin/opencv.js

 得到的opencv.js大小大概是8.3M

 3.局部函数编译

如果你只想要编译opencv的一部分功能,可以通过更改/var/user_download_data/remotedata/make_opencv_js/opencv-4.5.3/platforms/js下的opencv_js.config.py,即只保留想要的函数即可

比如我只留下：

core = {'': ['gemm', 'norm']}
calib3d = {'': ['solvePnP']}
white_list = makeWhiteList([core, calib3d])

但是使用生成的opencv.js的时候报错：

cv.matFromArray is not a function

使用这个发现没有cv.matFromArray, 

使用console.log(cv)，发现连这个都没有出来：

Uncaught ReferenceError: cv is not defined

参考：https://github.com/opencv/opencv/issues/17620

发现是加载的问题，但是使用上面说的方法也没有成功加载，反而是使用下面的写法能成功加载：

    <script type='text/javascript'>
      async function onOpenCvReady() {
          console.log('hello');
          console.log(cv);
          if (cv instanceof Promise) {
            cv = await cv;
            console.log(cv.Mat);
            console.log(cv.matFromArray);
          }
      }

    </script>

    <script src="js/opencv.js" onload="onOpenCvReady();" ></script>

可见，原因其实是cv还没有调用进来你就使用了，难怪没有调用到

这样就成功调用了opencv.js,现在这个模型的大小是2.1M