如何根据 Tensorflow.js 中的边界框裁剪人脸？答案

【问题标题】：How do I crop faces based on bounding boxes in Tensorflow.js?如何根据 Tensorflow.js 中的边界框裁剪人脸？
【发布时间】：2020-12-31 13:00:45
【问题描述】：

我需要裁剪在 BlazeFace 模型中检测到的人脸，然后将图像发送到我制作的自定义模型。我已经使用边界框实现了人脸检测，但一直无法裁剪人脸。

我有地标和 bottomRight 和 topLeft 的坐标，但我不知道该怎么做。在带有 tensorflow 的 python 中，它们存在这样做的函数，但是对于 tensorflow.js，我找不到任何东西。

在面部渲染边界框

    const faces = await bfModel
      .estimateFaces(tensor, returnTensors)
      .catch(e => console.log(e));
    console.log(faces);

    // Faces is an array of objects
    if (!isEmpty(faces)) {
      setModelFaces({ faces });
    }

  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;
      });
    }
  };

console.log(faces) 的输出：

Array [
  Object {
    "bottomRight": Tensor {
      "dataId": Object {},
      "dtype": "float32",
      "id": 220600,
      "isDisposedInternal": false,
      "kept": false,
      "rankType": "1",
      "scopeId": 426282,
      "shape": Array [
        2,
      ],
      "size": 2,
      "strides": Array [],
    },
    "landmarks": Tensor {
      "dataId": Object {},
      "dtype": "float32",
      "id": 220602,
      "isDisposedInternal": false,
      "kept": false,
      "rankType": "2",
      "scopeId": 426286,
      "shape": Array [
        6,
        2,
      ],
      "size": 12,
      "strides": Array [
        2,
      ],
    },
    "probability": Tensor {
      "dataId": Object {},
      "dtype": "float32",
      "id": 220592,
      "isDisposedInternal": false,
      "kept": false,
      "rankType": "1",
      "scopeId": 426249,
      "shape": Array [
        1,
      ],
      "size": 1,
      "strides": Array [],
    },
    "topLeft": Tensor {
      "dataId": Object {},
      "dtype": "float32",
      "id": 220599,
      "isDisposedInternal": false,
      "kept": false,
      "rankType": "1",
      "scopeId": 426280,
      "shape": Array [
        2,
      ],
      "size": 2,
      "strides": Array [],
    },
  },
]

【问题讨论】：

哪条线正在裁剪面部？我猜tensor 包含图像，对吧？
我没有进行裁剪，因为我不知道如何裁剪它。但是 faces 包含对象数组，例如地标、概率、topLeft 和 bottomRight。我用它们来绘制边界框。
是张量具有传递给模型的完整图像。
我已经添加了来自 console.log(faces) 的输出

标签： reactjs react-native tensorflow deep-learning tensorflow.js

【解决方案1】：

可以使用tf.image.cropAndResize 裁剪图像。张量应该是 4d 张量。如果图像是 3d 张量，则首先需要对其进行扩展。裁剪的预期高度和宽度应作为参数传递给copAndResize

boxes = tf.concat([topLeftTensor, bottomRightTensor]).reshape([-1, 4])
crop = tf.image.cropAndResize(images, boxes, [0], [height, width])

【讨论】：

topLeft 和 bottomRight 都是一维张量，所以这里的代码将它们组合成一个二维张量，对吧？是的，图像是 3D 张量，所以我会 expandDims 并在第一维上扩展它？为什么框索引设置为 [0]？
boxes 应该是一个二维张量。我更新了代码。如果图像是 3d 张量，可以使用 Expandims 或 reshape 来扩展图像。框索引设置为 [0] 以表示第一批。显然，如果您有多个批次，则需要相应地更新索引
好的，我试试。到目前为止，我的模型将一次发送一个批次，看看它的表现如何。

【解决方案2】：

我不确定，但它可以工作：

let img_4d = tf.expandDims(inputTF3D, axis=0)
const start = predictions[id].topLeft;
const end = predictions[id].bottomRight;
let boxes = tf.concat([start, end]);
boxes = tf.reshape(boxes,[-1, 4])
let crop = tf.image.cropAndResize(img_4d, boxes, [0], [IMAGE_HEIGHT, IMAGE_WIDTH])

https://github.com/tensorflow/tfjs/issues/3914

【讨论】：