Detect face and crop face image flutter firebase ml

Question

Here I need to crop detected faces and save as image/file. I am able to detecting face with rounded rectangle. How to crop the area of detected face? I am using flutter_firebase_ml_kit to detect faces. Here is my code:

getImageAndDetectFaces() async {
    setState(() {
      isLoading = true;
    });
    final image = FirebaseVisionImage.fromFile(widget.cardImage);
    final faceDetector = FirebaseVision.instance.faceDetector(
        FaceDetectorOptions(
            mode: FaceDetectorMode.fast,
            enableLandmarks: true
        )
    );
    List<Face> faces = await faceDetector.processImage(image);
    if (mounted) {
      setState(() {
        _faces = faces;
        _loadImage(widget.cardImage);
      });
    }
  }

  _loadImage(File file) async {
    final data = await file.readAsBytes();
    await decodeImageFromList(data).then(
          (value) => setState(() {
        img = value;
        isLoading = false;
      }),
    );
  }


class FacePainter extends CustomPainter {
  final ui.Image image;
  final List<Face> faces;
  final List<Rect> rects = [];


  FacePainter(this.image, this.faces) {
    for (var i = 0; i < faces.length; i++) {
      rects.add(faces[i].boundingBox);
    }
  }

  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    final Paint paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 15.0
      ..color = Colors.blue;

    canvas.drawImage(image, Offset.zero, Paint());
    for (var i = 0; i < faces.length; i++) {
      canvas.drawRect(rects[i], paint);
    }
  }


  @override
  bool shouldRepaint(FacePainter oldDelegate) {
    return image != oldDelegate.image || faces != oldDelegate.faces;
  }

}

Need solution on how to crop the detected face area. Thanks in advance.

You would have to use tensorflow or some ai model to detect the face and its edges. — CoderUni, Aug 18 '20 at 12:46

score 5 · Answer 1 · answered Feb 03 '21 at 23:30

After running the faceDetector using List<Face> faces = await faceDetector.processImage(image); you need to extract the information from each detected face. Since we are only interested in the bounding boxes you can use something like:

List<Map<String, int>> faceMaps = [];
for (Face face in faces) {
      int x = face.boundingBox.left.toInt();
      int y = face.boundingBox.top.toInt();
      int w = face.boundingBox.width.toInt();
      int h = face.boundingBox.height.toInt();
      Map<String, int> thisMap = {'x': x, 'y': y, 'w': w, 'h':h};
      faceMaps.add(thisMap);
    }

The above will create a list of Map<String, int> and then this is populated with the bounding box information of each detected face.

You can then use the copyCrop function of the Image package to extract the face from the bounding box

// add dart package as
import 'package:image/image.dart' as img;
// create an img.Image from your original image file for processing
img.Image originalImage = img.decodeImage(File(_imageFile.path).readAsBytesSync());
// now crop out only the detected face boundry, below will crop out the first face from the list
img.Image faceCrop = img.copyCrop(originalImage, faceMaps[0]['x'], faceMaps[0]['y'], faceMaps[0]['w'], faceMaps[0]['h']);

Hi, I followed your suggestion on Google ML Kit to stream frame and crop faces. The camera and GoogleMLKit works just fine but I couldn't reconstruct the `originalImage` from the `InputImage.bytes` Uint8List. Do you have any suggestion? Thanks — nđq, May 25 '21 at 05:48

score 2 · Answer 2 · answered Aug 21 '20 at 18:48

2

Once you have the bounding box, you should be able to crop the face with it. Not familiar with flutter, but here is some discussion about the image cropping with Dart: How do I crop an image in Flutter?

answered Aug 21 '20 at 18:48

Shiyu

875
4
5

Detect face and crop face image flutter firebase ml

2 Answers2