Is it possible to add images on the elements of my mind ?

[djanesh]

Hi Thanks for this tool. It works really well. I was wondering if it would be possible to add images to the elements. For example, if I want to make a organization hierarchy, it would be nice if you could add images of people within a organization. If you already have such examples, I would love to see that.

[ondras]

There is no built-in support for this. The hard part is deciding where to actually store such image.

But you can almost certainly insert images using the data-URI, which might or might not be supported in your browser when pasting image data from clipboard. Try this in Firefox and Chrome and tell us whether that worked or not 👍

[ssavinel]

Commenting on an old issue.
Can't the picture be turned to base64 and saved in the json file?

[ondras]

Can't the picture be turned to base64 and saved in the json file?

That is literally the point I was making in the previous comment :-)

[ssavinel]

I could have read the link...
Fair point! I'll try this.

[ssavinel]

I'd say it does not work well in Chromium based browsers

where it simply pastes the text in Firefox.

I also tried copying an image file directly and it works well on Firefox :

but only displays the local file path on Chromium, which means that it won't work on another device as the file is kept locally.

[ondras]

Perhaps we can scan the HTML content for <img> tags, drawing them into a separate <canvas> and convert to base64 via toDataURL.

[irfan-yusanif]

Hello @ondras , I'm adding images as base64:

When I add the image it re-arrange the nodes, that's excellent! (Please check below screenshot)

But when I open an existing map, it gives space between nodes as it is a single-line text (Please check below screenshot)

And when I select a node with image, write some text and update it.. then it re-arrange the parent node and gives the right amount of space.

How can I do the same re-arranging on restoring that we're doing to updating a node's text?

I have tried adding MM.Item.prototype.update(); after MM.App.io.restore(); but it doesn't work.

[ondras]

But when I open an existing map, it gives space between nodes as it is a single-line text (Please check below screenshot)

That is probably because the image is not loaded yet, so the size of the node is not known. Loading an image (even if it is base64-encoded) is an asynchronous operation. You would need to add a load event listener and re-render the map once it happens.