It's not immediately clear that submitting the form while the cropper is
active will not include the image _at all_. To make this evident, we
disable the submit button until the crop is complete.
Apparently, Firefox/Android defaults to using the front camera, and
does not provide any native UI for selecting a different one. We can
request the back camera by indiciting that the "environment" camera is
"ideal."
I've implemented the UI using TypeScript and Shoelace. I originally
started with Pico CSS, but I didn't really like its visuals. Since
capturing photos using the camera requires JavaScript, and that's
basically the entire point of this application, Shoelace's JavaScript
dependency (for WebComponents), is acceptable.
The photo capture uses the Media Capture Web API, which exposes the
camera directly as a video stream. We capture a frame from this stream
and save it in a canvas, which we then pass to Cropper.js to let the
user select only the relevant portion of the picture containing the
receipt itself.
Dustin