How is the image generated?

Question

css

Good afternoon.
How is the final image of ice cream generated here after choosing a color?

The image tag looks like this:

<img id="preview_image" class="img-responsive" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAzkAAAJ9CAYAAAAWrL...тут куча символов...==">

Perhaps there are ready-made libraries for creating something like this? Or tutorials? I would be grateful for links.

Answer 1

base64 encoding. Instead of linking to an image, the src attribute is set to the image itself.
You can encode and decode an image at codebeautify.org/base64-to-image-converter
for more information about base 64 and why it is needed, here