Imagem convertida para Base64


84
<input type="file" id="asd"/>

Eu gostaria de obter a imagem em base64 assim que o usuário escolher isso (antes de enviar o formulário)

Algo como :

$(input).on('change',function(){
  var data = $(this).val().base64file(); // it is not a plugin is just an example
  alert(data);
});

Eu li sobre API de arquivo e outras coisas, gostaria de uma solução simples e para vários navegadores (IE6 / IE7 excluído obviamente)

Qualquer ajuda apreciada, obrigado.


1
E o que você não entendeu sobre a API de arquivos HTML5? O que você tentou? O que não funcionou?
epascarello

@epascarello eles não são totalmente suportados, na verdade caniuse.com/#feat=fileapi eu preciso de uma solução , especialmente porque as versões do Android ainda são usadas (versões antigas), bem como para as versões antigas do iOS, e eu também gostaria de envolver o IE9, que ainda é muito usado: P
bombástico

uma solução alternativa para o quê? O que você está tentando fazer com o arquivo? base64file()- isso é um plugin?
David Hellsing

@David, gostaria de obter o arquivo base64 assim que o usuário selecionar o arquivo em seu pc, base64file () é apenas um exemplo
bombástico

1
@epascarello sim e essa era exatamente a minha pergunta, como suportar todos os navegadores: D
bombástico

Respostas:


212

function readFile() {
  
  if (this.files && this.files[0]) {
    
    var FR= new FileReader();
    
    FR.addEventListener("load", function(e) {
      document.getElementById("img").src       = e.target.result;
      document.getElementById("b64").innerHTML = e.target.result;
    }); 
    
    FR.readAsDataURL( this.files[0] );
  }
  
}

document.getElementById("inp").addEventListener("change", readFile);
<input id="inp" type='file'>
<p id="b64"></p>
<img id="img" height="150">

( PS: uma imagem codificada em base64 (string) 4/3 do tamanho dos dados da imagem original)

Verifique esta resposta para upload de várias imagens .

Suporte para navegador: http://caniuse.com/#search=file%20api
Mais informações aqui: https://developer.mozilla.org/en-US/docs/Web/API/FileReader


2
Sim, obrigado, então, na verdade, posso ver que o leitor de arquivos não é totalmente compatível. Como posso fazer o mesmo compatível com dispositivos Android / iOS antigos?
bombástico

1
existem outros navegadores? xD
RicardoE

Esse foi um código muito bom para a conversão de imagem em base64. Posso converter isso de volta para imagem em javascript? Já usei a decodificação de codificação base64 antes, mas não tenho nenhuma ideia sobre conversões de imagem.
The Coder

@TheCoder Você pode colocá-lo diretamente em img src como string base64, para obter dados de imagem dele, use o contexto de tela.
Qwerty

1
@bombastic Eu usei JS para construir aplicativos iOS e Android em ambas as plataformas e funcionaram bem. O iOS é normal e no Android, eu precisava de algum código nativo para obter permissão para a galeria ...
Osman Gani Khan Masum

35

Exatamente o que você precisa :) Você pode escolher a versão callback ou a versão Promise. Observe que as promessas funcionarão no IE apenas com Promise polyfill lib. Você pode colocar este código uma vez em uma página, e esta função aparecerá em todos os seus arquivos.

O evento loadend é disparado quando o progresso é interrompido no carregamento de um recurso (por exemplo, após "erro", "abortar" ou "carregamento" serem despachados)

Versão de retorno de chamada

        File.prototype.convertToBase64 = function(callback){
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    callback(e.target.result, e.target.error);
                };   
                reader.readAsDataURL(this);
        };

        $("#asd").on('change',function(){
          var selectedFile = this.files[0];
          selectedFile.convertToBase64(function(base64){
               alert(base64);
          }) 
        });

Versão prometida

    File.prototype.convertToBase64 = function(){
         return new Promise(function(resolve, reject) {
                var reader = new FileReader();
                reader.onloadend = function (e) {
                    resolve({
                      fileName: this.name,
                      result: e.target.result, 
                      error: e.target.error
                    });
                };   
                reader.readAsDataURL(this);
        }.bind(this)); 
    };

    FileList.prototype.convertAllToBase64 = function(regexp){
      // empty regexp if not set
      regexp = regexp || /.*/;
      //making array from FileList
      var filesArray = Array.prototype.slice.call(this);
      var base64PromisesArray = filesArray.
           filter(function(file){
             return (regexp).test(file.name)
           }).map(function(file){
             return file.convertToBase64();
           });
      return Promise.all(base64PromisesArray);
    };

    $("#asd").on('change',function(){
      //for one file
      var selectedFile = this.files[0];
      selectedFile.convertToBase64().
          then(function(obj){
            alert(obj.result);
          });
      });
      //for all files that have file extention png, jpeg, jpg, gif
      this.files.convertAllToBase64(/\.(png|jpeg|jpg|gif)$/i).then(function(objArray){
            objArray.forEach(function(obj, i){
                  console.log("result[" + obj.fileName + "][" + i + "] = " + obj.result);
            });
      });
    })

html

<input type="file" id="asd" multiple/>

8
<input type="file" onchange="getBaseUrl()">
function getBaseUrl ()  {
    var file = document.querySelector('input[type=file]')['files'][0];
    var reader = new FileReader();
    var baseString;
    reader.onloadend = function () {
        baseString = reader.result;
        console.log(baseString); 
    };
    reader.readAsDataURL(file);
}

1
'arquivo' é declarado, mas seu valor nunca é lido dentro da função getBaseUrl ().
Biranchi

@Biranchi fileé usado na última linhareader.readAsDataURL(file);
Achim

7

É útil trabalhar com Objeto Deferido neste caso, e retornar a promessa:

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

E a função acima pode ser usada desta forma:

var inputElement = $("input[name=file]");
readImage(inputElement).done(function(base64Data){
    alert(base64Data);
});

Ou no seu caso:

$(input).on('change',function(){
  readImage($(this)).done(function(base64Data){ alert(base64Data); });
});

Eu realmente precisava disso, quero dizer, o adiado, pois estou retornando o base64 ao método de chamada. Quero saber se sua solução funcionará em todos os navegadores?
Thameem

0

// https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

/* Simple */
function previewImage( image, preview, string )
{

    var preview     = document.querySelector( preview );
    var fileImage   = image.files[0];

    var reader      = new FileReader();

    reader.addEventListener( "load", function() {

        preview.style.height    = "100";
        preview.title           = fileImage.name;

        // convert image file to base64 string
        preview.src             = reader.result;

        /* --- */

        document.querySelector( string ).value = reader.result;                    

    }, false );

    if ( fileImage )
    {
        reader.readAsDataURL( fileImage );
    }

}

document.querySelector( "#imageID" ).addEventListener( "change", function() {

    previewImage( this, "#imagePreviewID", "#imageStringID" );

} )
/* Simple || */
<form>

    File Upload: <input type="file" id="imageID" /><br />
    Preview: <img src="#" id="imagePreviewID" /><br />    
    String base64: <textarea id="imageStringID" rows="10" cols="50"></textarea>

</form>

caixa de códigos

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.