Comment puis-je convertir une image en chaîne Base64 en JavaScript ?

Convertir une image en chaîne Base64 en JavaScript

La conversion d'une image en chaîne Base64 est une tâche courante dans le développement Web, en particulier lorsque vous besoin d'envoyer une image à un serveur. Voici deux approches JavaScript populaires pour y parvenir :

1. Approche FileReader :

Cette approche utilise l'API FileReader pour lire l'image sous forme de blob, puis la convertir en URL de données :

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

2. Approche HTML Canvas :

Une autre option consiste à créer un canevas HTML, à dessiner l'image dessus, puis à convertir le canevas en URL de données :

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Resize the canvas to the image's size
canvas.width = image.width;
canvas.height = image.height;

// Draw the image onto the canvas
ctx.drawImage(image, 0, 0);

// Convert the canvas to a data URL
const dataUrl = canvas.toDataURL('image/jpeg');

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!