Better Base64 Support (embed, export, etc..)

jhildenbiddle commented 8 years ago

When adding images to documents, it would be great if Typora had the ability to embed images within the markdown file using base64 encoding. This would prevent the need to maintain external images and the proper paths (which becomes tricky when working on multiple devices). I realize this may not be standard practice for markdown files, but it would make files infinitely more portable and prevent the need to deal with external files and paths.

For those instances where a markdown file with embedded base64 images causes issues (like uploading a README to GitHub which strips base64 images), an option to export to separate image files and a clean markdown file which references them could be used.

anandgraves commented 8 years ago

+1

MagicCube commented 8 years ago

+1

vassudanagunta commented 8 years ago

If Typora's Markdown keeps getting hacked with non-Markdown ways of doing things, it will soon no longer be a Markdown file editor. And with binaries embedded in the file, it is no longer a plaintext file (base64 not-withstanding).

Why not use MS Word or Apple Pages if you want stuff in a single non-plaintext file.

pgolebiowski commented 8 years ago

@vassudanagunta In fact Typora could support inline HTML, which is pretty common for markdowns. Having that, one could write this:

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

No need for custom solutions then, IMO.

nommaz commented 7 years ago

texbundle looks like the standard (or insipiring standard) way of doing this: https://github.com/typora/typora-issues/issues/622

AeliusSaionji commented 6 years ago

+1 for base64 embedded images.

If Typora's Markdown keeps getting hacked with non-Markdown ways of doing things...

Inline HTML is formally supported by Markdown and CommonMark spec. Moreover, inline HTML is explicitly within the stated spirit of Markdown (refer again to https://daringfireball.net/projects/markdown/syntax#html).

QED, inline HTML <img> tag with base64 data is a "Markdown way of doing things".

Jerry-Chow commented 6 years ago

+1 I really like to use typera to write documents, since HTML is powerful and it can support gif. could you please add the function that let customer to config their own pandoc command line, because pandoc can convert the image in html to a embedded inline html. Thank You .

simonfossom commented 6 years ago

Embedding images within the markdown file using base64 encoding is exactly what I need. I move files around and encrypt them and so on so maintaining img links is virtually impossible.

joejoe87577 commented 5 years ago

Any news on this? This option would greatly improve the usability when working with shared files.

patejn5 commented 5 years ago

Any news on this?

tatoosh commented 5 years ago

I need the base64 Image too for Documentation Exchange. Great idea!

tatoosh commented 5 years ago

How to help to get this into typora ??? Maybe this can help? https://www.base64-image.de/

ajcool2k commented 5 years ago

I'd love to have an option to convert images to base64 just for exporting my notes to HTML. It's just not ideal to have external references when uploading a note to an online share. It would require me to create accessible links for each image and update its references in my HTML. At the moment, PDF is the way to go until there's a solution for this.

GAZ082 commented 5 years ago

I support this idea.

julia-suarez-deel commented 5 years ago

Please we need this

AchilleasKn commented 5 years ago

+1

BloodmageThalnos commented 5 years ago

We need this thanks

zhangao0086 commented 5 years ago

+1

gynet commented 5 years ago

This is a great feature that is missing

eMuonTau commented 4 years ago

+1

EMUNES commented 4 years ago

This issue has been significant for me to choose markdown editor recently as more and more work has to be done during the lockdown and needs to be shared to others. There are some websites that already support auto-base64-convert and I enjoyed the fluency and convenience so much that it seems I have to go back to the sites again, lol...

Still support your guys anyway~

lemonriver commented 4 years ago

I need a single .md file with image contents.

TowardsTheSunSun commented 4 years ago

I need too too too too too too too too too too too too too too too

romanfi commented 4 years ago

+1

tatoosh commented 4 years ago

will there come a feature for it?

LeiRui commented 4 years ago

+1

EMUNES commented 3 years ago

I found markdown with typora really an enjoyable journey. However when it comes to many images, it behaves poorly, especially when you need to share your works with others or store them neatly. Thus I have to use docx etc for many cases such as notes taking and documentation sharing with code snippets which contains lots of images for illustration purposes.

I think markdown is born to make documenting with coding simple and enjoyble while being powerful. There is no such "markdown way" someone mentioned before that limits markdown from reaching that purpose in return. Anyway I like markdown with typora and I wish to enjoy more with it, usually and urgently for images that somehow need a huge new folder to store them and I can't upload them to GitHub as a whole...

kebyn commented 3 years ago

@vassudanagunta In fact Typora could support inline HTML, which is pretty common for markdowns. Having that, one could write this:
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />
No need for custom solutions then, IMO.

In order to be able to do this, I made a tool that can convert the picture to base64 and copy it directly to the clipboard for easy use

images to base64

GAZ082 commented 3 years ago

Cool, but on linux there is base64 cli tool that does that. You can pipe to any clipboard thingie and done, no need to use Go (which I love BTW but this is one of those cases where one line of bash does the trick).

mhanoglu commented 3 years ago

+1

Machaing commented 3 years ago

I need too too too too too too too too too too too too too too too too

Sartner commented 3 years ago

+1

jsvisa commented 3 years ago

+1

RicoP commented 3 years ago

+1

This should be a relatively to implement feature.

AnilGoutham49 commented 3 years ago

Don't know why nobody in this thread mentioned this idea already, but I'm sure others thought of it before me. I uploaded my images to an image-hosting site (there's many of them out there - Wix, Google Drive, Imgur etc.) and copied the image links into my Typora document. Works like clockwork even in the HTML Export. Hope this helps! Screenshot (74)

iamNCJ commented 3 years ago

Don't know why nobody in this thread mentioned this idea already, but I'm sure others thought of it before me. I uploaded my images to an image-hosting site (there's many of them out there - Wix, Google Drive, Imgur etc.) and copied the image links into my Typora document. Works like clockwork even in the HTML Export. Hope this helps!

This definitely works, and typora has even supported auto-uploading.🤣 The meaning of supporting base64 is that we can embed everything into the plain text markdown file, not referring to somewhere outside.

epikgit commented 3 years ago

Don't know why nobody in this thread mentioned this idea already, but I'm sure others thought of it before me. I uploaded my images to an image-hosting site (there's many of them out there - Wix, Google Drive, Imgur etc.) and copied the image links into my Typora document. Works like clockwork even in the HTML Export. Hope this helps!

It's not a solution applicable to every scenario. In certain situation you can't publish the images for security/privacy/opportunity/copyright reasons. Plus detaching your images and your text introduce a separation level that can drive you to data loss (i.e. the remote service disappears, or limits the duration of your upload and trashes the oldest images, or ban you for whatever reason, and so on...) or temporary unavailability (your internet connection is down, the image service is temporary unavailable, your security filter is cutting it out).

AnilGoutham49 commented 3 years ago

Don't know why nobody in this thread mentioned this idea already, but I'm sure others thought of it before me. I uploaded my images to an image-hosting site (there's many of them out there - Wix, Google Drive, Imgur etc.) and copied the image links into my Typora document. Works like clockwork even in the HTML Export. Hope this helps!

It's not a solution applicable to every scenario.

In certain situation you can't publish the images for security/privacy/opportunity/copyright reasons.

Plus detaching your images and your text introduce a separation level that can drive you to data loss (i.e. the remote service disappears, or limits the duration of your upload and trashes the oldest images, or ban you for whatever reason, and so on...) or temporary unavailability (your internet connection is down, the image service is temporary unavailable, your security filter is cutting it out).

Yeah, I can now see why Base64 Encoding is the best way to go about it. Thanks!

romanfi commented 3 years ago

The workaround I found is to use an online Base64 converter and then copy/paste the text on Typora like so

This is the end result

Of course it is not very practical especially if you have many images

jhildenbiddle commented 3 years ago

The workaround I found is to use an online Base64 converter and then copy/paste the text on Typora

Just imagine how much more convenient it would be if Typora did that for us! 😉

Drag-and-drop image into Typora:

Typora adds image as markdown

![My Local Image](/path/to/image.png)
![My Remote Image](http://domain.com/image.png)

User opts to convert the above image to Base64 via a context menu ("Convert image to Base64") or application preference ("Automatically convert images to Base64"). Typora generates the Base64 code, hides the base64 source using "..." by default (click to toggle full Base64 source visibility), and stores the original path/URL as a data-src attribute:
```
<img src="data:image/png;base64 ..." data-src="/path/to/image.png" alt="My Local Image">
<img src="data:image/png;base64 ..." data-src="http://domain.com/image.png" alt="My Remote Image">
```
Optional: User opts to revert Base64 image back to path/URL (i.e., "Revert Base64 image to source") which uses the data-src attribute value to restore the original path/URL:
```
![My Local Image](/path/to/image.png)
![My Remote Image](http://domain.com/image.png)
```

jamesfancy commented 2 years ago

+1, I need the feature too.

Maybe it was a bad experience while editing a long long base64 source (follow picture)

That's just a very small image file in 1.5K bytes. Think about a bit image file in megabytes —— so terrible.

Therefore the samilar things occur while we editing a big Mermaid diagram. So I suggest to use a extra dialog or float window to show the image/diagram source. That would be better.

bayeslearner commented 2 years ago

please add bi-directional base64 and file conversion as shortcuts; When I try to copy/paste a zotero note that contains image snippets, it is automatically base64 encoded, and typora can't render it correctly.

Epicene commented 1 year ago

+1, I need the feature too. I really often incorporate Base64 encoded images in my Markdown documents. Would love Typora to propose to encode an image in Base64 on the fly when pasting it from clipboard for instance or inserting from Open dialog! Or an item in the contextual menu of the image. And an option to decode from Base64 to normal image file too and save it in User Data folder as usual. Thank you.