Insert image as base64 (preferably drag'n'drop)

1

Is there a way to insert images as base64 encoded string? Preferably also allowing images to be dragged and dropped to the editor.

Other solutions are also welcome. The point is that the image should be stored in the editor document and not require images stored on the server (loaded from url).

2

Do data: urls maybe solve this issue?

3

I’m sorry, I don’t understand the suggestion. Can you elaborate a bit?

What I’m trying to accomplish is to store images (jpeg, png, gif) as a base64 string, so that the actual image is not stored outside of the editor document but directly saved as a string and thus recreatable.

I’m aware that this requires my own custom base64 conversion, so I’m looking for a suggestion for implementing it and storing that type of node with a similar to the following Content-type.

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

I imagine the simplest way is to grab the url from the editor “Insert image” menu item and convert that and add the content-type. Would the editor render this correctly as an encoded image or is that a wrong approach? Do you (or anybody else) have an example of this?

Thanks for your help.

4

Thanks, @marijn, for participating. :smile:
I made an attempt on converting the image and adding the base64 attributes to the image tag. It seems to work and the base64 encoded image renders fine.

If there is a better approach or this solution seems unreasonable, please make suggestions.

5

Hey @nicolaib, could you share how you solved this issue? I am trying to solve a similar problem - support drag&drop and pasting image from clipboard as well.