Overview

It's common for a website to contain profile pictures of human faces. These often have the following problems:

• Crop must be done before upload or is human controlled leading to inconsistency at best
• Inconsistent or low resolution capture
• Only allows camera or only allows file upload

This is a profile-picture picker that largely resolves these common issues.

Crop

The first task is to improve the cropping. This is largely handled by facial detection.

I used the headtrackr.js library because of its speed and simplicity.

The library returns the coordinates and dimensions of the face it finds. I use these to crop the image automatically.

To speed speed things up and improve the framerate of the preview, the main stream from the camera is rendered off-screen, reduced in resolution, then fed into the library.

Resolution

The preview of the crop is smaller on screen than most input images. In the case of a webcam capture, the original high-resolution stream is used for capture instead of the one coming from the input to the facial detection.

Flexibility

In this implementation, the same widget supports capture from:

• Camera
• File browser
• Drag and drop

After face detection, the auto-cropped image can be re-cropped by the user by using the mouse wheel and

Feedback, error handling, and safety

Focus was placed on great feedback:

• Active states
• Actionable error messages
• Obvious drag-and-drop feedback
• State can be easily reset to select another image
• Cropping is handled client-side so server never sees areas of image the user might want to keep private