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

J'ai besoin de convertir mon image en une chaîne Base64 afin de pouvoir envoyer mon image à un serveur.

Existe-t-il un fichier JavaScript pour cela? Sinon, comment puis-je le convertir?

Vous pouvez utiliser le HTML5 <canvas>pour cela:

Créez un canevas, chargez-y votre image puis utilisez-la toDataURL()pour obtenir la représentation Base64 (en fait, c'est une data:URL, mais elle contient l'image encodée Base64).

Il existe plusieurs approches parmi lesquelles vous pouvez choisir:

1. Approche: FileReader

Chargez l'image en tant qu'objet blob via XMLHttpRequest et utilisez l' API FileReader pour la convertir en dataURL :

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)
})

Cet exemple de code peut également être implémenté à l'aide de l' API de récupération WHATWG :

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))


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

Ces approches:

• manque de prise en charge du navigateur
• avoir une meilleure compression
• fonctionne également pour d'autres types de fichiers

Prise en charge du navigateur:

• http://caniuse.com/#feat=filereader
• http://caniuse.com/#feat=fetch

2. Approche: toile

Chargez l'image dans un objet image, peignez-la sur un canevas non contaminé et reconvertissez le canevas en dataURL.

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

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

En détail

Formats d'entrée pris en charge:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp,image/xxx

Formats de sortie pris en charge:

image/png, image/jpeg, image/webp(Chrome)

Prise en charge du navigateur:

• http://caniuse.com/#feat=canvas

• Internet Explorer 10 (Internet Explorer 10 fonctionne uniquement avec les mêmes images d'origine)

3. Approche: images du système de fichiers local

Si vous souhaitez convertir des images à partir du système de fichiers des utilisateurs, vous devez adopter une approche différente. Utilisez l' API FileReader :

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}

<input type="file" onchange="encodeImageFileAsURL(this)" />

Cet extrait peut convertir votre chaîne, image et même fichier vidéo en données de chaîne Base64.

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

Fondamentalement, si votre image est

<img id='Img1' src='someurl'>

alors vous pouvez le convertir comme

var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');

ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();

Voici ce que j'ai fait:

// Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

Et voici comment vous l'utilisez

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

J'ai trouvé que la façon la plus sûre et la plus fiable de le faire est de l'utiliser FileReader().

Démo: Image vers Base64

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
      </textarea>
    </div>
    <script>
      function encode() {
        var selectedfile = document.getElementById("myinput").files;
        if (selectedfile.length > 0) {
          var imageFile = selectedfile[0];
          var fileReader = new FileReader();
          fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result;
            var newImage = document.createElement('img');
            newImage.src = srcData;
            document.getElementById("dummy").innerHTML = newImage.outerHTML;
            document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
          }
          fileReader.readAsDataURL(imageFile);
        }
      }
    </script>
  </body>
</html>

Si vous avez un objet fichier, cette fonction simple fonctionnera:

function getBase64 (file, callback) {

    const reader = new FileReader();

    reader.addEventListener('load', () => callback(reader.result));

    reader.readAsDataURL(file);
}

Exemple d'utilisation:

getBase64(fileObjectFromInput, function(base64Data){
    console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});

Vous pouvez utiliser FileAPI , mais il n'est pratiquement pas pris en charge.

Pour autant que je sache, une image peut être convertie en une chaîne Base64 soit par FileReader () soit en la stockant dans l'élément canvas, puis en utilisant toDataURL () pour obtenir l'image. J'ai eu le même genre de problème que vous pouvez vous référer.

Convertir une image en toile déjà chargée

Essayez ce code:

Pour un événement de modification de téléchargement de fichier, appelez cette fonction:

$("#fileproof").on('change', function () {
    readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

Stockez les données Base64 dans des fichiers cachés à utiliser.

uploadProfile(e) {

    let file = e.target.files[0];
    let reader = new FileReader();

    reader.onloadend = function() {
        console.log('RESULT', reader.result)
    }
    reader.readAsDataURL(file);
}

Eh bien, si vous utilisez Dojo Toolkit , cela nous donne un moyen direct d'encoder ou de décoder en Base64.

Essaye ça:

Pour coder un tableau d'octets à l'aide de dojox.encoding.base64:

var str = dojox.encoding.base64.encode(myByteArray);

Pour décoder une chaîne codée en Base64:

var bytes = dojox.encoding.base64.decode(str);