shiffman / BodyBlock

Experimenting with BodyPix model and Obscuring faces/bodies.
30 stars 4 forks source link

Fits image to canvas container #14

Closed joeyklee closed 4 years ago

joeyklee commented 4 years ago

Description

This PR updates the current processFrame() function to use the img.resize() function in p5 to resize the incoming image to match that of the canvas container to fit in the given space.

This PR approaches fitting a video preview into the canvas area by doing the following:

  1. The incoming image sets the p5 canvas size.
  2. the image segmentation occurs on a canvas that is set to display:none
  3. the p5 canvas is drawn to the video preview area using another canvas element using ctx.drawImage()
  4. The video preview area is scaled to fit the preview area.

Additionally, this PR switches to the use of the resnet50 model for higher accuracy on the bodypix results.

Potential problems

A better approach might be to apply the segmentation on the full size image, then resize for rendering purposes only -- TBD -- resolved with using an off-screen canvas and showing an image preview in the video preview area.

Updates

joeyklee commented 4 years ago

@shiffman - There are certainly some optimizations to me made, but I think it makes sense to merge in and sync with your write-file branch

joeyklee commented 4 years ago

Merging this in now!