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