catdad-experiments / share-edit

📐 PWA for editing images that shows up in the share sheet

share edit

This Progressive Web Apps is an experiment using Share Target Level 2, allowing it to appear in the share sheet and accept images. If you install this app using the "Add to home screen" prompt, it will add an "Edit" option to your share sheet, allowing you to do some basic image editing in a web app!

I got tired of having each app always save a copy of my image any time edit an image. Taking a simple screenshot for a one-off share can result in 3 or 4 images being saved and you have to then go delete in order to clear the clutter. And solving this problem with a small web application is just cool! With newer version of Android (and Chrome 76+), you can now take a screenshot by summoning assistant and selecitng "Share screenshot", crop and markup in this app, and share it out, all without ever saving an image. Neat!

share-edit's Issues

es modules!

clicking cancel on the open dialog throws

mobile screenshots load as tiny square

implement drawing on the image

images from the front camera only show a small square

implement toast so I can show messages

general TODO

• Share button should toast hint
• Draw
• Control draw brush size
• Undo for individual drawings
• Crop to square / specific dimensions
• Rotate
• Drag crop area around
• Save undo stack
• Save button
• Long-press "Download image" doesn't work for large images, consider using blobs with an object URL

images are bigger when saved, even if they are cropped

Looks like canvas only supports lossless PNG and PNG compression libraries are super slow (crushpng posrts, optipng, etc.). Maybe provide a JPEG option when images do not contain alpha?

crop to specific ratios

add color picker to drawing tool

render image into canvas

image positioning and cropping brooen in chrome 83

load images with correct orientation

loading portrait images from my phone camera results in image being rotated, fix it

see example for reading exif data in the browser: https://github.com/blueimp/JavaScript-Load-Image/tree/master/js

port experiments framework into this app

service worker does not handle post request on gh-pages

automatic rotation is broken in chrome 83

support for receiving shared images

Files are currently in the Level 2 spec for of web share target: https://github.com/WICG/web-share-target
w3c/web-share-target#29
w3c/web-share-target#53

Proof of concept for handling form data in a service worker: https://github.com/ewilligers/web-share-target-demo/blob/901173867d4c83a19722cfb63ea07c6abb5a9409/sw.js

disable tools when no image is loaded

look into disabling pull to refresh