Screenshots with saved-on annotations

[jamesshannon]

screen/ needs a mechanism for saving annotations as part of the image or otherwise serving images with the annotations. Driving use cases:

• Blur annotation, so that the portion of the screenshot that was intended to be blurred is not viewable by looking at the raw image
• All annotations, so that we can serve a raw PNG (for, e.g., including in Slack) or right-click copying and pasting into something else

I like that you can remove annotations and, probably in the future, move or otherwise change existing annotations. So for non-blur annotations, the owner should be able to annotate on top of an original copy of the image. I'm not sure if this should apply to the blur annotation as well. E.g., should the screenshot owner be able to see an unblurred image and be able to remove (or, generally, edit) the blur annotation? Or once the blur is added (and saved) then should we delete all original images?

A few ways to achieve this:

1. Right now each time an annotation is added (or removed) the JSON data for the annotations list is sent to the server and the database record is updated. Instead of sending the annotation data the browser could send the entire annotated canvas. This is a significantly larger web request, and more processing by the server (to, e.g., write the new image to s3 and cache a local copy). If we want to allow editing and removal of annotations we have to manage having a -original.png version, plus a -with-annotations.png version.

2. We could do the same as in # 1, but with only blur annotation(s). If we choose to make blur annotations permanent (non-editable and with the original non-viewable, even by the owner) then we don't have to worry about keeping the original version around and the blurred version can overwrite the original. If the blur annotation is permanent then we should provide some information to the user that their blur will be instantly permanent. Or maybe a mechanism to "apply" (or "save") the blur annotation. Do we remove the blur annotation(s) from the annotation list? (At least they should get a non-editable flag set.)

3. We could install image editing software on the server (e.g., PIL) and it could apply the annotations (or just blur) at serving time to viewers. This adds extra processing on the server but, more importantly, I suspect it would be difficult to get the annotations to appear the same when applied from a different package. (This could be solved by creating the images server-side with headless chrome, which would also allow for re-using the javascript annotation classes.)