无法在 React-Native 中检测到的面部上绘制边界框

Question

我正在尝试在脸上绘制边界框，但 CSS 存在一些问题，显示以下错误：

[269,"RCTView",281,{"position":"absolute","borderWidth":2,"borderColor":-65536,"left":"<<NaN>>","top":"<<NaN>>","width":"<<NaN>>","height":"<<NaN>>"}] is not usable as a native method argument

错误来源的边界框样式：

  bbox: {
    position: "absolute",
    borderWidth: 2,
    borderColor: "red"
  },

在面部渲染边界框的函数：

  const previewLeft = 40;
  const previewTop = 50;
  const previewWidth = 350;
  const previewHeight = 600;
  const tensorDims = { height: 224, width: 224, depth: 3 };


  const renderBoundingBoxes = () => {
    const { faces } = modelFaces;
    const tensorDims = { height: 300, width: 400 };
    const scale = {
      height: styles.camera.height / tensorDims.height,
      width: styles.camera.width / tensorDims.width
    };
    const flipHorizontal = Platform.OS === "ios" ? false : true;
    if (!isEmpty(faces)) {
      return faces.map((face, i) => {
        const { topLeft, bottomRight } = face;
        const bbLeft = topLeft[0] * scale.width;
        const boxStyle = Object.assign({}, styles.bbox, {
          left: flipHorizontal
            ? previewWidth - bbLeft - previewLeft
            : bbLeft + previewLeft,
          top: topLeft[1] * scale.height + 20,
          width: (bottomRight[0] - topLeft[0]) * scale.width,
          height: (bottomRight[1] - topLeft[1]) * scale.height
        });

        return <View style={boxStyle} key={`face${i}`}></View>;
        1;
      });
    }
  };

正在调用 RenderBoundingBoxes：

    <View>
      <TensorCamera
        style={styles.camera}
        type={type}
        cameraTextureHeight={textureDims.height}
        cameraTextureWidth={textureDims.width}
        resizeHeight={tensorDims.height}
        resizeWidth={tensorDims.width}
        resizeDepth={tensorDims.depth}
        onReady={images => handleCameraStream(images)}
        autorender={AUTORENDER}
      />
      {renderBoundingBoxes()}
   </View>

Answer 1

我弄错了，bottomRight 和 topLeft 不是数组而是张量对象。我需要先使用 tf.dataSync() 下载张量，然后访问其中的数组：

  const renderBoundingBoxes = () => {
    const { faces } = modelFaces;
    const scale = {
      height: styles.camera.height / tensorDims.height,
      width: styles.camera.width / tensorDims.width
    };
    const flipHorizontal = Platform.OS === "ios" ? false : true;
    if (!isEmpty(faces)) {
      return faces.map((face, i) => {
        const { topLeft, bottomRight } = face;
        const bbLeft = topLeft.dataSync()[0] * scale.width;
        const boxStyle = Object.assign({}, styles.bbox, {
          left: flipHorizontal
            ? previewWidth - bbLeft - previewLeft
            : bbLeft + previewLeft,
          top: topLeft.dataSync()[1] * scale.height + 20,
          width:
            (bottomRight.dataSync()[0] - topLeft.dataSync()[0]) * scale.width,
          height:
            (bottomRight.dataSync()[1] - topLeft.dataSync()[1]) * scale.height
        });

        return <View style={boxStyle}></View>;
        1;
      });
    }
  };

无法在 React-Native 中检测到的面部上绘制边界框

Unable to draw bounding box on detected face in React-Native

javascript

css

reactjs

react-native

tensorflow.js