Convertir base64 en image javascript

Dans le développement front-end, nous devons souvent convertir des chaînes codées en Base64 en images à afficher sur des pages Web. Cette conversion peut nous aider à charger dynamiquement des images et à les afficher sur la page sans support serveur. Ensuite, cet article expliquera comment utiliser JavaScript pour convertir une chaîne codée en base64 en image.

1. Le principe de l'encodage Base64

L'encodage Base64 est une méthode d'encodage qui convertit les données binaires en caractères ASCII imprimables. Il convertit tous les trois octets en quatre caractères et ajoute un signe "=" à la fin (si nécessaire).

Par exemple, un nombre binaire de 16 bits 1111010100110000 peut être converti en une chaîne codée en Base64 "5q0=". Le processus de conversion est le suivant :

1. Divisez 11110101 en deux nombres à six chiffres : 111101 et 010011.
2. Ajoutez deux 0 à la fin de ces deux nombres à six chiffres pour devenir 11110100 et 01001100.
3. Combinez ces deux tableaux de huit bits en un nombre binaire de 16 bits : 1111010001001100.
4. Convertissez ce nombre binaire en décimal et obtenez 61676.
5. Convertissez 61676 en caractère codé en Base64 "5q0=".

2. Convertir l'encodage Base64 en images en JavaScript

Dans le développement front-end, nous utilisons souvent des requêtes asynchrones Ajax pour obtenir des chaînes encodées en Base64, puis convertissons Il est converti en image et affiché sur la page Web. Voici les étapes à suivre pour convertir une chaîne codée en Base64 en image à l'aide de JavaScript :

1. Créez une balise

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

2. Récupérez la chaîne encodée en Base64 et attribuez-la à l'attribut src de la balise

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

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

3. Si vous devez utiliser du code JavaScript pour obtenir et traiter des chaînes codées en Base64, vous pouvez utiliser Canvas pour convertir. Ce qui suit est un exemple de code pour convertir une image en chaîne codée en Base64 via 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;
}

Ce qui précède explique comment convertir l'encodage Base64 en images. Grâce à cette méthode, nous pouvons facilement afficher des images codées en Base64 dans des pages Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!