Скачать или смотреть How to Convert Base64 String to a Usable URL for Images

Learn how to convert a Base64 encoded string from an HTML canvas into a usable URL that can be opened in a new window.
---
This video is based on the question https://stackoverflow.com/q/72267040/ asked by the user 'Grambam' ( https://stackoverflow.com/u/7934389/ ) and on the answer https://stackoverflow.com/a/72276857/ provided by the user 'Grambam' ( https://stackoverflow.com/u/7934389/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: convert base64 string to usable URL

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Convert Base64 String to a Usable URL for Images

When working with HTML canvas in web development, you might find yourself needing to convert an image stored as a Base64 string back into a format that you can easily use, such as a URL. This is particularly useful if you've used the toDataURL() method to convert the canvas into an image, and now you want to make it viewable in a new browser window.

The Challenge

You might encounter situations where you have a Base64 string that looks something like this:

[[See Video to Reveal this Text or Code Snippet]]

This string represents an image in Base64 format, containing the metadata and the actual image data. The task is to take this string and convert it into a usable URL that can be opened with the window.open() method.

The Solution

Here’s a step-by-step guide on how to achieve this using JavaScript:

1. Extract the Base64 Image Data

First, you'll need to separate the Base64 string from its metadata. The method requires you to remove the data:image/png;base64, prefix to obtain the pure Base64 encoded data.

2. Decode the Base64 String

Once you have the raw Base64 data, you will decode it to binary data which can be manipulated into an image format.

3. Create a Blob

After decoding, you can use the binary data to create a Blob object which represents the image data in a format that browsers can understand.

4. Generate a URL

Finally, use URL.createObjectURL() to generate a URL for the Blob, which you can open in a new window.

Full JavaScript Code Example

Here is the complete JavaScript code to carry out the above steps:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Code:

atob(): This function decodes a Base64 string back to a binary string.

Uint8Array: This is used to create a typed array that represents an array of 8-bit unsigned integers.

Blob: A Blob object represents a file-like object of immutable, raw data. In this case, it's the image data.

createObjectURL(): This method creates a DOMString containing a URL representing the object presented in the parameter.

Conclusion

By following the steps outlined above, you can easily convert a Base64 encoded string from your HTML canvas into a usable URL that can be opened in a new browser window. This method allows for smooth handling of image data in web applications, enriching user experiences with dynamic content.

Now you have everything you need to turn that Base64 string into a viewable image URL!