web-dev-qa-db-fra.com

Comment convertir une image en chaîne base64 à l'aide de javascript

J'ai besoin de convertir mon image en chaîne base64 pour pouvoir envoyer mon image sur un serveur. Existe-t-il un fichier js pour cela ...? Sinon comment le convertir

javascriptbase64
440
Coder_sLaY

Vous pouvez utiliser HTML5 <canvas> pour cela:

Créez un canevas, chargez-y votre image, puis utilisez toDataURL() pour obtenir la représentation en base64 (en réalité, il s'agit d'une URL data: mais contenant l'image codée en base64).

173
ThiefMaster

Vous pouvez choisir parmi plusieurs approches:

1. Approche: FileReader

Chargez l'image en tant que blob via XMLHttpRequest et utilisez = 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 pourrait également être implémenté en utilisant WHATWG fetch api :

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 support du navigateur
  • avoir une meilleure compression
  • travailler pour d'autres types de fichiers aussi bien

Prise en charge du navigateur:

2. Approche: toile

Chargez l'image dans un objet image, peignez-la sur une toile non teintée et reconvertissez la toile 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:

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 le FileReader API :

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)" />
754
HaNdTriX

Cet extrait peut convertir votre chaîne, votre image et même votre 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>
74
user1801972

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)
})
18
James Harrington

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();
17
mecek

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

function getBase64 (file,callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

Usage Ex: -

getBase64(fileObjectFromInput, function(base64Data){
    console.log("base 64 of file is",base64Data);//here you can have your code which uses base64 for its operation,//file to base64 by oneshubh
});
5
Shubham

Vous pouvez utiliser FileAPI , mais c'est quasiment non supporté.

5
Artem Tikhomirov

Autant que je sache, l'image peut être convertie en chaîne base64 soit par FileReader (), soit en la stockant dans un élément canvas, puis en utilisant toDataURL () pour obtenir 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

4
Ajeet Lakhani

Essayez ce code

Téléchargement de fichier événement chcage de 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();
}

Stocker les données base64 dans un champ caché à utiliser.

4
ravi polara

J'ai trouvé que le moyen le plus sûr et le plus fiable de le faire est d'utiliser FileReader()

Démo: Image to 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>
2
jonathana

Eh bien, si vous utilisez le dojo, 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 encodée en base64:

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