Convert base64 to image javascript

In front-end development, we often need to convert Base64-encoded strings into images to display on the web page. This conversion can help us dynamically load images and display them on the page without server support. Next, this article will introduce how to use JavaScript to convert a Base64-encoded string into an image.

1. Principle of Base64 encoding

Base64 encoding is an encoding method that converts binary data into printable ASCII characters. It converts every three bytes into four characters and adds a "=" sign at the end (if needed).

For example, a 16-bit binary number 1111010100110000 can be converted into a Base64-encoded string "5q0=". The conversion process is as follows:

1. Divide 11110101 into two six-digit numbers: 111101 and 010011.
2. Add two 0s at the end of these two six-digit numbers to become 11110100 and 01001100.
3. Combine these two eight-bit arrays into a 16-bit binary number: 1111010001001100.
4. Convert this binary number to decimal number and get 61676.
5. Convert 61676 to Base64 encoded character "5q0=".

2. Convert Base64 encoding to images in JavaScript

In front-end development, we often use Ajax asynchronous requests to obtain Base64 encoded strings, and then convert them into images and displayed on the web page. Here are the steps on how to convert a Base64-encoded string into an image using JavaScript:

1. Create an a1f02c36ba31691bcfe87b2722de723b tag to display the image.

<img id="img" src="" alt="image">

2. Get the Base64 encoded string and assign it to the src attribute of the a1f02c36ba31691bcfe87b2722de723b tag.

let base64Img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxglj
NBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

document.getElementById("img").src = base64Img;

3. If you need to use JavaScript code to obtain and process Base64 encoded strings, you can use canvas to convert. The following is a sample code for converting an image to a Base64 encoded string through canvas.

let img = document.createElement("img");
img.src = "image.png";

img.onload = function() {
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  let ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  let base64Img = canvas.toDataURL("image/png");

  document.getElementById("img").src = base64Img;
}

The above is the method to convert Base64 encoding into pictures. Through this method, we can easily display Base64 encoded images in web pages.

The above is the detailed content of Convert base64 to image javascript. For more information, please follow other related articles on the PHP Chinese website!