Como converter uma imagem em string Base64 usando JavaScript?


Respostas:


182

Você pode usar o HTML5 <canvas> para isso:

Crie uma tela, carregue sua imagem nela e use-a toDataURL()para obter a representação Base64 (na verdade, é uma data:URL, mas contém a imagem codificada em Base64).


3
toDataURLcontrole sobre os retornos de chamada, done/fail/alwayscomo é o caso do xhr?
Jeroen

Podemos extrair 2 ou mais telas como um único PNG?
techie_28

141
Você pode criar um jsbin ou pelo menos escrever algum código aqui?
Vsync

9
Essa abordagem falha no caso de violação do CORS. Além disso, esta solução deve abordar a questão.
Revanth Kumar 04/04


852

Você pode escolher entre várias abordagens:

1. Abordagem: FileReader

Carregue a imagem como blob via XMLHttpRequest e use a API FileReader para convertê-la em 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)
})

Este exemplo de código também pode ser implementado usando a API de busca 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)
  })

Essas abordagens:

  • falta de suporte ao navegador
  • tem melhor compressão
  • trabalhar para outros tipos de arquivos também

Suporte do navegador:


2. Abordagem: Tela

Carregue a imagem em um objeto de imagem, pinte-a em uma tela não contaminada e converta a tela novamente em um 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)
  }
)

Em detalhe

Formatos de entrada suportados:

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

Formatos de saída suportados:

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

Suporte do navegador:


3. Abordagem: Imagens do sistema de arquivos local

Se você deseja converter imagens do sistema de arquivos dos usuários, precisa adotar uma abordagem diferente. Use a 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)" />


56
Não está funcionando no chrome para mim: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.
DickieBoy 5/14

5
Caso isso aconteça com mais alguém, essa rotina inclui o cabeçalho "data: image / jpg; base64" na string que retorna, para que você não precise anexá-lo.
Chris Rae

1
Warnin2: algo mexe com o conteúdo. em algum lugar ao longo do caminho, há uma chance de os dados serem corrompidos / alterados (embora, talvez não muito), pelo menos isso acontece comigo no firefox 35 em algumas imagens, a base64 é diferente da base64 que o php cria na mesma imagem.
hanshenrik

1
Sim isso está certo. Alguns dados podem se perder, pois na verdade desenhamos a imagem em um elemento de tela ( developer.mozilla.org/en-US/docs/Web/API/… ) e, em seguida, convertemos em um dataURL ( developer.mozilla.org/en- EUA / docs / Web / API / HTMLCanvasElement /… ).
HaNdTriX

1
Abordagem: o FileReader (2) funciona mais rapidamente do que a abordagem Canvas. Testado em fotos grandes. Espero que seja útil para alguém.
Max

83

Esse snippet pode converter sua string, imagem e arquivo de vídeo em dados de string 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>


3
Não é apenas ótimo, mas também ignora o problema de origem entre domínios! Com isso, você pode permitir que os usuários forneçam suas próprias imagens ou imagens a partir de um URL (já que o Windows as buscará por conta própria), desenhe-as na tela e trabalhe com elas enquanto ainda pode usar .toDataURL () etc. Muito obrigado!
EloRado1239

Olá, como isso pode ser aplicado a uma imagem carregada de um URL remoto sem enfrentar problemas entre domínios? Obrigado
guthik

Às vezes, isso funciona no Chrome 78.0.3904.97, mas outras vezes ele trava a guia.
Dshiz

28

Basicamente, se sua imagem é

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

então você pode convertê-lo como

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

5
Infelizmente, isso funcionará apenas para imagens locais; se você tentar usar uma imagem remota (escolha uma da Web), ela a gravará no console (firefox): 'SecurityError: A operação é insegura'.
usar o seguinte comando

1
Pode funcionar em outras imagens, mas depende das configurações do CORS desse site e deve ser especificado como #<img id='Img1' src='someurl' crossorigin='anonymous'>
Mike

No Firefox, você pode desativar temporariamente essa segurança. Vá para "about: config" e altere a propriedade "privacy.file_unique_origin" para false
Manuel Romeiro

21

Aqui está o que eu fiz:

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

E aqui está como você o usa

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

7
o que é btoa? :)
Alexander Mills


14

Eu descobri que a maneira mais segura e confiável de fazer isso é usar FileReader().

Demonstração: 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>

6

Se você tiver um objeto de arquivo, esta função simples funcionará:

function getBase64 (file, callback) {

    const reader = new FileReader();

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

    reader.readAsDataURL(file);
}

Exemplo de uso:

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



4

Tente este código:

Para um evento de alteração de upload de arquivo, chame esta função:

$("#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();
}

Armazene os dados Base64 em arquivos ocultos para uso.


1
Oi Ravi! Vejo que você é relativamente novo. A menos que o pôster original solicite especificamente uma solução de biblioteca como jQuery, lodash e assim por diante, é melhor que todos respondam usando o mínimo necessário, neste caso, javascript simples. Se você ainda quer contribuir com jQuery, por favor, deixar bem claro em sua entrada :)
Carles Alcolea

3
uploadProfile(e) {

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

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

0

Bem, se você estiver usando o Dojo Toolkit , ele nos fornece uma maneira direta de codificar ou decodificar no Base64.

Tente o seguinte:

Para codificar uma matriz de bytes usando dojox.encoding.base64:

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

Para decodificar uma sequência codificada em Base64:

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

2
@ DownVoter - Caro, é melhor apontar o erro também se você estiver marcando algo negativo. para que alguém possa melhorar. Até onde eu entendo o dojo, também em uma biblioteca JavaScript, se você tiver permissão para usar o dojo, poderá usar definitivamente essa abordagem.
Vikash Pandey
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.