SVG/PNG/JPG import - Githubissues

edemaine / cocreate

Cocreate Shared Whiteboard/Drawing

MIT License

209 stars 27 forks source link

SVG/PNG/JPG import #22

Open edemaine opened 4 years ago

edemaine commented 4 years ago

This would enable e.g. coloring books and grid paper (as a quick-hack alternative to #21).

SVG import should actually be really easy to implement, provided the file fits within one BSON document, which is 16MB so probably all we really need/want. A new type of object svg (at the level of pen), which just renders as is. We'll quickly want the ability to move it, and possibly scale it, via #17.

Once we have SVGs, images (PNG/JPG) would not be much harder -- just need to wrap in <image> tags.

[ ] SVG import
[ ] PNG/JPG image import
[ ] Dragging files onto the canvas (this would be especially convenient for placing it where you want it, instead of having to drag it after import)
[ ] Pasting from clipboard
[ ] Quota system (per image, also per board? per user and require auth?) might be needed...
[ ] Automatic downsizing in resolution and JPEG compression?
[ ] Only vector importing?

tomtachi commented 4 years ago

It might be even better if I can paste clipboard image, then I don't even need to save a screenshot. I think we often take screenshot and annotate.

kmcliff commented 4 years ago

This would also enable students working on a desktop computer without tablet capabilities to share pictures of their handwritten work. It would be awesome if we could get image sharing soon!

edemaine commented 4 years ago

@kmcliff Coauthor is designed for that kind of image uploading in a group (as are other tools). You might consider using it instead?

Cocreate is really about being able to draw, e.g., to annotate on top of a picture.

mehtank commented 3 years ago

PR #142 allows for pasting PNG/JPG (and text) from the clipboard, which gets rendered as an in the svg. This framework can probably be reused for drag/drop [ which uses the same DataTransfer object ], and with some more logic can probably interpret svgs from the clipboard as well. Scaling [ issue #17 ] will be particularly relevant here. Also, perhaps some way of "locking" objects so they're not selectable / moveable / erasable by default would make the annotation functionality mentioned above more user-friendly.

edemaine commented 3 years ago

For those following this issue, I just implemented and deployed #144 which is a sort of workaround for this; it allows embedding arbitrary images (SVG/PNG/JPG/etc.) from another image host, such as Imgur (PNG/JPG only) or Coauthor or your website or really any website. This lets Cocreate use arbitrary images without taxing the server's disk space, until we figure out a good account/quota system.

loleg commented 3 years ago

I tried this, and it works nicely on Chrome - but on Firefox I am running into CORS restrictions.

edemaine commented 3 years ago

@loleg Could you please open a new issue that is more specific? What image are you trying to embed, and what error do you get on Firefox, in what situations?