在 Ionic4 中使用 Javascript API答案

【问题标题】：Using a Javascript API in Ionic4在 Ionic4 中使用 Javascript API
【发布时间】：2019-12-13 12:27:56
【问题描述】：

我需要在 Ionic4 项目中使用 Javascript API (https://github.com/justadudewhohacks/face-api.js)。为此，我需要将 lib face-api.min.js 导入我的文件夹。但据我所知，Ionic 仅适用于 Typescripts 文件......我寻找文档但没有成功......

这是我在浏览器中工作的代码，我需要在 Ionic 项目中使用：

const video = document.getElementById('video')

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startVideo)

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video)
  document.body.append(canvas)
  const displaySize = { width: video.width, height: video.height }
  faceapi.matchDimensions(canvas, displaySize)
  setInterval(async () => {
    const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
    const resizedDetections = faceapi.resizeResults(detections, displaySize)
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
    faceapi.draw.drawDetections(canvas, resizedDetections)
  }, 100)

})

语法与 Typescript 相同（document.GetElementById 除外，但我们会调整），但只要我可以调用 API 文件就可以了。

有人知道如何在 Ionic4 项目中实现一个 JS 文件吗？

【问题讨论】：

任何有效的 JavaScript 行都是有效的 TypeScript 行。在 typescript 项目中使用用 vanilla javascript 编写的包是很常见的。
但是如果我在我的项目中添加任何 .js 文件，他就会停止。似乎只允许使用 .ts 扩展名。
如果不了解您是如何执行此操作的，则很难确定问题所在。但是，在你的 typescript 项目中使用 js 文件应该没有什么问题。

标签： javascript typescript api ionic-framework ionic4

【解决方案1】：

有用于加载异步 JavaScript 文件的库。 https://www.npmjs.com/package/scriptjs

安装包：

npm i scriptjs

然后在下面的任何地方使用它：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

或

您可以简单地使用 jquery 方法在标题中附加或删除脚本标记。

要添加 .js 文件，请在页面加载时调用以下代码：

$('head').append('<script async src="assets/js/search.js"></script>');

删除 .js 文件：

document.querySelector('script[src="assets/js/search.js"]').remove();

【讨论】：

【解决方案2】：

我看到了一个示例 github 存储库，您可以检查参考：

Ionic4-ngx-face-api-js

【讨论】：