如何将OpenCV与Ionic 3集成?

weylhg0b  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(154)

我正在建立一个移动的应用程序的身体测量通过照片我捕捉。我如何可以使用OpenCV相同?如何集成OpenCV与离子框架?请帮助。

xxslljrj

xxslljrj1#

本质上,你可以引入一个opencv.js框架的风格。我做这个的方法是,拉下一些像https://docs.opencv.org/3.4.1/opencv.js这样的引用,然后把它托管在某个地方(以防opencv把它移到你身上)。然后把这个脚本包含在Ionic项目中。但是要小心你的操作。它是一个大文件,所以它可能需要应用程序更长的时间来加载。我用过的一些选项是:

本地资产

将js文件存储在本地资产中,并将其包含在index.js中。如果将Ionic应用部署为本机应用,则此资产已经在应用中,并且加载速度相当快。

<script src="assets/js/opencv.js" async></script>

动态载入档案(范例如下)

async ionViewDidLoad() {

    let loadingScreen = this.loadingCtrl.create({ content: "Loading Scripts. Please Wait..." });

    //Show loading screen & load scripts
    try {
      await loadingScreen.present();
      await this.loadScript();
    }
    catch (error) {
      this.errorMessage = "We had some trouble loading scripts...";
    }
    finally {
      loadingScreen && loadingScreen.dismiss();
    }
}

public loadScript(): Promise<any> {
    return new Promise((resolve, reject) => {
      var isFound = false;
      var scripts = document.getElementsByTagName("script")
      for (var i = 0; i < scripts.length; ++i) {
        if (scripts[i].getAttribute('src') != null && 
scripts[i].getAttribute('src').includes("opencv")) {
          isFound = true;
          return resolve();
        }
      }

      if (!isFound) {
        var dynamicScripts = ["https://docs.opencv.org/3.4.1/opencv.js"];

        for (var i = 0; i < dynamicScripts.length; i++) {
          let scriptNode = document.createElement('script');
          scriptNode.src = dynamicScripts[i];
          scriptNode.type = 'text/javascript';
          scriptNode.async = false;
          scriptNode.charset = 'utf-8';
          document.getElementsByTagName('head')[0].appendChild(scriptNode);

          scriptNode.onload = resolve;
        }
      }
    });
}

相关问题