0

Right now I'm working on a movie browser app which displays images of the acting cast. The images themselves are loaded from an external source via a URL link. I'm wondering how I can pass those images through a face detector, and display the cropped face within an img tag?

The image tag itself requests a src, but I intend to use the image after it has been passed through the face detector, meaning it won't be coming from an external source. I don't think I can pass an image matrix into img directly, so how could I store the image within my React app so it can be passed into img?

This app will be deployed on GitHub Pages or Netlify for public viewing, so I won't be able to modify the source files presumably. I'm assuming a server will come into play but how?

T.Mung
  • 31
  • 7
  • Theres a lot of things you could do here, I used [imgix](https://docs.imgix.com/apis/url/face-detection/faces) and that was pretty effective. but this question is a bit opinionated / off topic for SO – John Ruddell Aug 20 '19 at 23:24
  • What face detector are you using? Is this an external api or something you are building? – ryan28561 Aug 20 '19 at 23:24
  • @ryan28561 I'm not really set on one. I'm open to using an external API or a JS library. JS library would probably be optimal. I think I may have just figured it out though, please chime in. I'll have an image component which calls the face detector that returns the box coordinates containing the face. Provided those coordinates, it seems like one can effectively crop the original image with clever uses of
    -- https://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped/493329#493329 That may not be my exact solution but it seems to be the gist of it.
     – T.Mung Aug 20 '19 at 23:33

0 Answers0