Comment convertir image en chaîne de caractères base64 en utilisant javascript

il y a plusieurs approches que vous pouvez choisir:

1. Approche: FileReader

chargez l'image comme blob via XMLHttpRequest et utilisez la API FileReader pour la convertir en une 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 aussi être implémenté en utilisant L'api WHATWG fetch :

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
• ont une meilleure compression
• travailler aussi 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 une toile non teintée et convertissez la toile à nouveau 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 supportés:

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 supportés:

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

Prise En Charge Du Navigateur:

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

• IE10 (IE10 fonctionne avec la même origine des images)

---

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

si vous voulez convertir des images à partir du système de fichiers utilisateurs, vous devez adopter une approche différente. L'utilisation de la 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)" />

cet extrait pourrait convertir votre chaîne,image et même fichier vidéo en données de chaîne de base64. Essayer une fois...

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

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

en gros, 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, 0, 0, c.width, c.height);
var base64String = c.toDataURL();

vous pouvez utiliser FileAPI , mais il est à peu près beaucoup non pris en charge.

pour 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 et ensuite utiliser toDataURL() pour obtenir l'image.J'ai eu le genre de problème simmilar vous pouvez renvoyer ceci.

convertissez une image en toile qui est déjà chargée

essayez ce code

fichier upload Chnage event 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.

Eh bien, si vous utilisez dojo, cela nous permet de coder ou de décoder directement base64.

essayez ceci:

pour encoder un tableau d'octets en utilisant dojox.encodage.base64:

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

Pour décoder une chaîne base64:

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