Converting Image to base64

Simple system that converts image to base64 and base64 to image

[Clique aqui para ler em português]

Let’s create a tool with JavaScript that converts image to base64 and does the opposite, transforming base64 into an image.

Code

First we will create the interface, we will do something simple, using only HTML.

HTML code

Here we have a file type input, we will receive the image upload, we also have a textarea that will be where the base64 image will be, we also have an img tag where the image preview will be and finally a download button to download the image. Image.

Now let’s start the JavaScript part.

JS code — Part1

First we have the addition of events for the input, textarea and button, then we have a preview variable and finally we have the previewFile function, in this function we use the FileReader to help us work with the image loading, after the image has been loaded ( onloadend) added in the preview and the base64 code added in the textarea.

JS code — Part2

We now have two more functions:

• previewText = Here we take the text received in the textarea and add the preview, thus converting base64 to image.
• DownloadFile = Here we download the image that is appearing in the preview.

ready as simple as that.

Demo

See the complete project working below.

Projeto no codepen

Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

Video on youtube

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊