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

J'ai besoin de convertir mon image en base64 de la chaîne afin que je puisse envoyer mon image sur un serveur.
Est-il un fichier js pour ce... ? Sinon comment faire pour le convertir

InformationsquelleAutor Coder_sLaY | 2011-05-27
  1. 170

    Vous pouvez utiliser le HTML5 <canvas> pour elle:

    Créer une toile, chargez votre image, et ensuite utiliser toDataURL() pour obtenir la représentation base64 (en fait, c'est un data: URL, mais il contient l'image à l'encodage base64).

    • Ne toDataURL donner le contrôle sur les rappels comme les done/fail/always comme c'est le cas pour xhr?
    • Peut-on extraire des 2 ou plus de la toile comme un seul PNG?
    • Pouvez vous s'il vous plaît faire une jsbin ou au moins écrire un peu de code ici?
    • Cette approche ne tient pas dans le cas de violation de la SCRO. En dehors de cela, cette solution devrait aborder la question.
    • Voici npm paquet
    • quelqu'un peut partager un lien de démonstration de ce qui a été dit dans la réponse? @ThiefMaster

    InformationsquelleAutor ThiefMaster
  2. 746

    Il existe plusieurs approches que vous pouvez choisir à partir de:

    1. Approche: FileReader

    Charger l'image blob via XMLHttpRequest et l'utilisation de la FileReader API pour la convertir en une dataURL:

    JS:

    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 mis en œuvre en utilisant le WHATWG chercher de l'api:

    JS:

    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 dans la prise en charge du navigateur
    • ont le meilleur taux de compression
    • de travail pour d'autres types de fichiers ainsi

    Prise En Charge Du Navigateur:

    2. Approche: Toile

    Charger l'image dans une Image-Objet, de la peinture à un non entachée de toile et de convertir le dos toile pour une dataURL.

    JS:

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

    dans le détail

    Pris en charge les formats d'entrée:

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

    Pris en charge les formats de sortie:

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

    Prise En Charge Du Navigateur:

    3. Approche: les Images du système de fichiers local

    Si vous voulez convertir des images de la part des usagers du système de fichiers vous avez besoin de prendre une approche différente.
    Utiliser le FileReader API:

    JS:

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

    HTML:

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

    • +1 pour img.crossOrigin = 'Anonymous';
    • ne fonctionne pas dans IE11 pour moi
    • Êtes-vous sûr d'utiliser IE11? Je l'ai juste testé dans IE11 et il a bien fonctionné pour moi. Mais j'ai aussi testé dans IE10 et j'ai eu une erreur de sécurité parce que IE10 ne prend pas en charge la SCRO pour les images. Vous pourriez avoir à le proxy vos images par le biais de votre propre nom de domaine afin de le faire fonctionner dans IE10.
    • Lorsque j'essaie d'utiliser ce GIF image va encore dire que, en itsbase64 forme: données:image/png;base64,................ ils doivent dire: image/gif. J'ai essayé en passant de l'image/gif, en outputFormat variable var en obtenant le format de l'image, mais encore il montre des données:image/png...Pourquoi est-ce donc?
    • Le format GIF n'est pas pris en charge comme format de sortie. Plus d'infos @ developer.mozilla.org/en-US/docs/Web/API/... (j'ai mis à jour ma réponse à clarifier ce point)
    • Est-il un moyen de le faire sans jquery comme le rappel?
    • Cette fonction n'a rien à voir avec jQuery. C'est une opération asynchrone si vous avez besoin d'un rappel ou une sorte de promesse.
    • Ne fonctionne pas sous chrome pour moi: Image from origin **** has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
    • Quelle version de chrome utilisez-vous? Avez-vous essayé le violon ci-dessus?
    • Il dépend de la configuration du serveur qui héberge l'image. Le JSFiddle travaille avec l'image upload.wikimedia.org/wikipedia/commons/4/4a/... parce que sa server a permis fiddle.jshell.net d'accès. Lire plus sur le stackoverflow.com/questions/10636611/...
    • J'ai essayé le violon. C'était l'erreur que j'ai eu, peut-être que le serveur a changé sa configuration.
    • Juste au cas où les voyages de quelqu'un d'autre, cette routine comprend le "data:image/jpg;base64," tête dans la chaîne de caractères qu'elle renvoie, de sorte que vous n'avez pas besoin d'ajouter que.
    • R Merci pour cette remarque. J'avoue que le nom de la fonction n'était pas comme descriptif, comme il aurait dû l'être.
    • Aussi, si vous essayez de créer une très grande toile sur iOS (par exemple, l'un à partir de l'appareil photo, dans mon cas) cela semble fonctionner bien, mais le retour de données":,". Vous pouvez résoudre ce problème en changeant le canevas, la largeur et la hauteur de quelque chose de plus petit, par exemple 100, et la modification de la lecture appel à quelque chose comme ctx.drawImage(img, 0, 0, 100, 100).
    • est-ce sans perte? comme, de même que base64_encode(file_get_contents($url)) de PHP? ou la toile de conversion mess avec elle?
    • Ce script ne fonctionne pas suivre HTTP 301 Déménageur en Permanence Lieu: new/location.jpg ; devrait le corriger ou ajouter un avertissement. c'est (probablement) pourquoi l'exemple de code ci-dessus ne fonctionne pas pour les gens, ils ne changent pas l'url, et que l'url est maintenant redirige vers upload.wikimedia.org/wikipedia/commons/4/4a/...
    • Warnin2: mess quelque chose avec le contenu. quelque part le long du chemin, il y a une chance que les données est endommagé ou modifié (même si, peut-être pas de beaucoup), au moins ce qui se passe pour moi sur firefox 35 sur certaines images, le base64 est différente de la base64 que php crée sur la même image.
    • Oui c'est exact. Certaines données risquent d'être perdues depuis que nous avons fait dessiner l'image d'un Élément canvas (developer.mozilla.org/en-US/docs/Web/API/...) et puis de le convertir en un dataURL (developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/...).
    • Est-il un moyen de faire ce travail pour image enregistrée sur un système de fichiers local, par exemple file://C:/test.jpg
    • Non c'est pas possible, parce que vous n'avez pas accès au système de fichiers local. Mais vous pouvez utiliser le fileReader API. Découvrez ce violon jsfiddle.net/handtrix/xztfbx1m
    • Comment la deuxième approche pourrait soutenir un type de fichier?!
    • Vous pouvez encoder des vidéos ou des fichiers audio ainsi que les fichiers image. par exemple: jsfiddle.net/handtrix/YvQ5y/1730
    • Approche: FileReader (2) les travaux plus rapidement qu'à l'approche de la Toile. Testé sur de grandes photos. Espérons qu'il sera utile pour certains.
    • Essayez cette image! Ne fonctionne pas qph.is.quoracdn.net/...
    • Yepp c'est parce qu'il est bloqué par le serveur via la SCRO. html5rocks.com/en/tutorials/cors
    • Si quelqu'un veut utiliser ES6 essayer ce principe: gist.github.com/HaNdTriX/bdffd11761701fbeba27f23e9a69515f
    • J'ai été en utilisant la méthode 1, mais avait pour commenter la "img.crossOrigin = "Anonyme";", afin de le faire fonctionner sous IE (11). J'ai été faire 302 erreurs de IIS et toutes les images que j'ai essayer de télécharger ont été signalés comme "Abandonné" dans l'onglet réseau de la IE Developer Console.
    • FYI: IE11 jette InvalidStateError sur la mise à responseType. Solution: Définissez responseType après l'appel à open() pour que cela fonctionne dans IE11. connect.microsoft.com/IE/feedback/details/795580/...
    • Pour la toile de rendu de l'utilisation de ce.la largeur et la ce.la hauteur va vous donner la taille de l'image tels qu'installés dans le rendu de l'élément, mais si l'image elle-même est plus grand, il en résultera une partie seulement de l'image en cours de rendu sur la toile. Pour corriger cela, vous pouvez utiliser ce.naturalHeight et ce.naturalWitdth au lieu
    • Bonne prise @anyab! Merci! J'ai amélioré la réponse.
    • Bonjour, pourriez-vous expliquer pourquoi le juge 'img.complet === undefined'?C'est pour la compatibilité？
    • Cela permet de s'assurer que la charge de l'événement se déclenche aussi pour les images mises en cache. gist.github.com/HaNdTriX/7704632
    • Si l'ensemble de l'api n'est pas pris en charge, il ne sera pas défini.
    • Pouvez-vous donner un code, pour le même à l'aide d'axios..? Je suis en train de travailler avec reactjs.
    • Non, mais voici un indice pour vous diriger dans la bonne direction. L'utilisation d'axios responseType prop.
    • Merci pour la réponse détaillée. Option #2 semble être à côté de la outputFormat argument dans l'exemple invocation de toDataURL.
    • Savez-vous si le FileReader approche souffre d'aucune perte de données des questions comme la toile approche? Merci encore!
    • Le outputFormat est facultatif. Mieux omettre. J'ai juste ajouté qu'il est complet. Autant que je sache FileReader de ne pas subir de perte de données. J'ai comparé sa sortie avec d'autres implémentations (par exemple, php.net/manual/en/function.base64-decode.php).

    InformationsquelleAutor HaNdTriX
  3. 73

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

    HTML:

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

    • Non seulement il est grand, c'contourne également le crossdomain origine du problème! Avec cela, vous pouvez autoriser les utilisateurs à fournir leurs propres images ou des images à partir d'une URL (depuis Windows va la chercher sur son propre), dessiner sur la toile, et de travailler avec eux tout en étant capable de l'utiliser .toDataURL (), etc. Merci beaucoup!
    • Bonjour, comment cela peut-il être appliqué à une image téléchargée à partir d'une url distante sans avoir à affronter des croix domaine des questions? Merci
    InformationsquelleAutor
  4. 18

    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)
})
    InformationsquelleAutor James Harrington
  5. 14

    En fait, si votre image est 

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

    ensuite, vous pouvez 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();
    • Malheureusement, cela ne fonctionne que pour les images locales, si vous l'essayez, utilisez une image distante (choisissez une option à partir du web), il écrit de ce (firefox) de la console: 'SecurityError: L'opération est incertain'.
    • Il peut travailler sur d'autres images, mais dépend de la SCRO paramètres du site et doit être spécifié comme <img id='Img1' src='someurl' crossorigin='anonymous'>
    InformationsquelleAutor mecek
  6. 5

    Vous pouvez utiliser FileAPI, mais il est assez bien pris en charge.

    InformationsquelleAutor Artem Tikhomirov
  7. 5

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

    function getBase64 (file,callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

    Utilisation 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
});
    InformationsquelleAutor Shubham
  8. 4

    Autant que je sache, l'image peut être converti en base64 de la chaîne, soit par FileReader() ou de le stocker dans l'élément canvas et ensuite utiliser toDataURL() pour obtenir l'image.J'ai eu le simmilar genre de problème vous pouvez renvoyer cette.

    Convertir une image sur une toile, ce qui est déjà chargé

    InformationsquelleAutor Ajeet Lakhani
  9. 4

    Essayer Ce code

    De téléchargement de fichiers Chnage événement ccall 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();
}

    Magasin base64data cachés déposé à utiliser.

    • Salut Ravi! Je vois que vous êtes relativement nouveau. Sauf si l'original de l'affiche de la demande spécifiquement pour une solution en bibliothèque comme jQuery, lodash et ainsi de suite, c'est mieux pour tout le monde pour répondre à l'aide de la minimums nus, dans ce cas, la plaine de javascript. Si vous voulez continuer à contribuer avec jQuery, veuillez vous rendre plus clair dans votre entrée 🙂
    InformationsquelleAutor ravi polara
  10. 2

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

    Démo: Image en 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>
    InformationsquelleAutor jonathana
  11. 1

    Bien, si vous utilisez dojo, il nous donne une façon directe d'encoder ou de décoder en base64.

    Essayez ceci:

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

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

    Pour décoder une chaîne base64:

    var bytes = dojox.encoding.base64.decode(str);
    • Cher de son mieux pour souligner l'erreur aussi, si vous êtes marquage quelque chose de négatif. de sorte que quelqu'un peut améliorer. pour autant que je suis compréhension dojo également une bibliothèque JavaScript alors si vous êtes autorisé à utiliser dojo, vous pouvez certainement utiliser cette approche.
    InformationsquelleAutor Vikash Pandey