Import images

[vjeux]

Just in case someone wants to work on this, the implementation should have these attributes:

Technical

1. The image source data (the base64 or whatever format) shouldn't be stored in elements array, but live in a separate data structure (likely in appState.images).
2. The image source will be linked to an element (of {type: "image"} or something) that will live in elements — this element will be used for manipulation, and act as a normal element would.
3. In collab, the image source shouldn't be synced more than once per session. Only the element in elements array should be synced freely as we normally do with other elements.
4. The image source should be compressed (using pako zlib library we're already using for something else) before syncing/storing to database. Note, we're talking about a lossless compression, but EDIT: gzipping the image will actually offer almost no benefits, so let's not do that. But we'll want to serialize to binary string instead of base64 (which is inefficient). But we may also consider lossy compression (thus encode as JPG).
5. There should be a limit on individual size, and likely a limit on total images per scene.
6. When persisting the image to server (e.g. for collab scenes), we're currently using Firebase Firestore, which has 1MB size limit on documents. So we'll need to persist the images to separate Firestore documents, or preferably to Firebase Storage which is more suited for resources such as images (it also has better pricing per GB).

UI

• For the first iterration we don't want any UI changes and adding images should happen with drag and drop (and maybe in the context menu to support mobile)
• Show additional information in stats
  • Total number of images
  • Total size of images
  • When selecting an image or two.. show their size.

[jaredpalmer]

How about in the interim we support insertion from URL?

[jaredpalmer]

From UX perspective, you should be able to:

• Drag and drop any image onto the window/canvas
• Paste from image clipboard
• Change fill mode: Fill, Contain, Tile

[cmart11]

Seems like we should also be able to crop the image with a shape or upload it as a shape's fill, but that may be better left for a new issue.

[jordic]

Persistence could be done as base64 encoded json values

[dwelle]

Keep in mind that we still store to localStorage (so we have ~5MB limit) and need to cache app (+canvas) state (potentially multiple, when #253 is implemented). Copy/pasting (meaning potentially another whole canvas) logic will also use localStorage.

Maybe we should investigate using different storage (IndexedDB...), soon.

[jordic]

Perhaps the implementations should be every image blob a key on localstorage and only store on the file the reference to the item. Others are doing these, (thought kibana)

[j-f1]

We could upload the images in an encrypted manner to json.excalidraw.com.

[lipis]

What about downloading the file?

[j-f1]

Download a zip maybe?

[kbariotis]

How about getting a non-profit license from a hosting service? I've used Cloudinary in the past. cc @vjeux

[vjeux]

Yeah, I’d rather not we use random third party to host user content. We already have a way to store end to end encrypted blobs with json.excalidraw.com

[moritonal]

I've worked on this for a couple of hours and found it fairly simple to add a new component so that's kudos to neat code. I noticed then however there's PR #1589 which is also implementing this, so will pivot to help that progress.

[chendabo]

is there any progress on this issue?

[dwelle]

Not at this moment.

I'm gonna link here what the implementation should look like: #1589 (comment) We updated the description of this issue on how the implementation should look like.

[theoryshaw]

+1

[DuncanLithgow]

@o0O-ds-O0o note that anyone can support the project at any time from https://opencollective.com/excalidraw

[jaideeprana]

Any tentative date on when this feature will be released?

[heitara]

Check the PR mentioned above.

[dragos-vlad]

Any updates on this issue? The PR referenced is a POC and hasn't had any activity in 2021.

[dwelle]

Wrong PR. This one is active: #3424. Will get back to it in a few days. Latest preview: https://excalidraw-9im2ruy53-excalidraw.vercel.app/

[alexbarbato]

Looks like the active PR might now be #4011! Preview: https://excalidraw-git-imagesupport-excalidraw.vercel.app/

Yal are amazing <3

[ederparaiso]

Wrong PR. This one is active: #3424. Will get back to it in a few days. Latest preview: https://excalidraw-9im2ruy53-excalidraw.vercel.app/

Thanks for sharing and congratulations! I'm using this preview version to my needs and sounds very functional to me. I hope to get this version officially in main excalidraw =D

[day0ops]

Seems like it breaks any images added when doing a scene export and re-import. Is this a known issue in this PR ?

[bric3]

While this PR is being worked on. For my IntelliJ IDEA Excalidraw integration plugin I copied internal code to support image export / import as suggested by (although I am currently using version 0.8).

Eg (along with a few other files, like codec.ts) :

https://github.com/bric3/excalidraw-jetbrains-plugin/blob/main/excalidraw-assets/src/image.ts

This is definitely a workaround but it's working.

[dwelle]

Seems like it breaks any images added when doing a scene export and re-import. Is this a known issue in this PR ?

@pseudonator Are you trying the latest preview? https://excalidraw-cxhuxg4g9-excalidraw.vercel.app/

Anyway, we're releasing soon, very soon.

[dwelle]

Released https://twitter.com/excalidraw/status/1451280455647563783

[thfrei]

Released https://twitter.com/excalidraw/status/1451280455647563783

It seems to be released on excalidraw.com allright. However it is not yet in the stable @excalidraw/excalidraw npm package. I found image support when trying the demo with @excalidraw/excalidraw-next works. Thank you all very much for your effort!

https://codesandbox.io/s/excalidraw-forked-95wx0

Do you have a rough timeline when you will release the next version of stable excalidaraw (v0.11.0?)?

[ad1992]

We need to finalise few API's so probably by end next month we will be shipping the next release

[gohma231]

Would it be possible for this to support PDFs as well?

[heitara]

@gohma231 what do you mean? If you convert the pdf file to an image then you can use it. If you have something else in mind, please create an issue and elaborate on it.

[ryanhaticus]

I'd love to get started on PDF annotations via. Excalidraw.
I created a fork.

[ricky11]

Seems like we should also be able to crop the image with a shape or upload it as a shape's fill, but that may be better left for a new issue.

would love to be able to crop images.

[wutsminame]

@gohma231 what do you mean? If you convert the pdf file to an image then you can use it. If you have something else in mind, please create an issue and elaborate on it.

is it possible to load the pdf file in excalidraw so that i can read and annotate texts or pictures in pdf via excalidraw and automatically (or manually) generate elements in canvas of excalidraw? what inspired me is an app called guga compatible only with ipad currently, and since that app is similar to excalidraw in terms of a whiteboard, excalidraw can work better with obsidian if some functions(especially with pdf) can be realized.

[anatoliibakhtin]

@wutsminame you can:
https://www.youtube.com/watch?v=nB4cOfn0xAs&ab_channel=Zsolt%27sVisualPersonalKnowledgeManagement
(maybe you already know)