convertir binario (como una imagen) en base64

asitudela · #1 (**permalink**) 04/05/2012, 13:56

Buenas,

llevo atascado un buen rato intentan conseguir una función (sólo javascript) que me transforme una imagen (introducida en un formulario) a base64.

la idea es:

var image = document.getElementById('fileUpload').files[0];

var imagenCodificadaEnBase64 = funcion_conversora_base64(image);

He probado decenas de scripts, y lo máximo que he encontrado ha sido alguno que me ha transformado la imagen en una cadena de no más de 20 caracteres cuando debía haber sido una cadena un un tamaño considerable de estos.

estoy buscando algo como esto:
http://www.greywyvern.com/code/php/binary2base64

(He probado a transformar cadenas, y sin ningún problema, pero necesito transformar imágenes que se han introducido desde un formulario, sin la necesidad de una petición al servidor)

¿Alguien le ha tocado hacerlo alguna vez?

Saludos

maycolalvarez · #2 (**permalink**) 04/05/2012, 13:58

javascript NO tiene acceso al IO, por lo tanto no puedes leer el binario de las imágenes

Panino5001 · #3 (**permalink**) 04/05/2012, 14:22

Maycol tiene razón. No obstante, como parece ser que estás usando un campo de tipo file y la api fileReader de html5, en ese caso particular y teniendo en cuenta que no todos los navagadores lo sopoprtan y también que tenés que probarlo en un servidor web para que funcione (en local falla con algunos navegadores), podés hacer algo como esto:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript"> 
function $(x){return document.getElementById(x);} 
onload=function(){ 
    $('archivo').addEventListener('change',previsualizar,false); 
} 
function codificar(im){ 
    var i=new Image(); 
    i.onload=function(){ 
        var w=this.width, 
        h=this.height, 
        canvas=document.createElement('canvas'), 
        ctx=canvas.getContext('2d'); 
        canvas.width=w; 
        canvas.height=h; 
        ctx.drawImage(i,0,0,w,h); 
        $('log').innerHTML=canvas.toDataURL().split('base64,')[1]; 
         
    } 
    i.src=im; 
} 
function previsualizar(e){ 
    var input=e.target,fr=new FileReader(), 
    tipos=/^image/jpg|image/jpeg|image/png|image/gif$/i; 
    if(input.files.length===0)return; 
    if(!tipos.test(input.files[0].type)){alert("El archivo selecionado es inválido");return;} 
    fr.onload=function(evt){ 
        var im=evt.target.result; 
        codificar(im); 
    } 
    fr.readAsDataURL(input.files[0]); 
     
     
     
} 
</script> 
</head> 
 
<body> 
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> 
    <input type="file" name="archivo" id="archivo" /> 
</form> 
<div id="original"></div> 
<div id="log"></div> 
 
</body> 
</html>

asitudela · #4 (**permalink**) 06/05/2012, 15:29

Gracias Panino5001 por tu respuesta, pero mi objetivo es realizarlo sin esa API, que como comentas, no es compatible con parte de los navegadores actuales.

Crees que podría adaptar el código que has puesto sin la necesidad de esa API, porque entiendo que la conversión la hace directamente el objeto canvas, haciendo algo similar a:

Código:

<input type ="file" name ="fileToUpload" id ="fileToUpload" onchange ="fileSelected();" />

<script>

function codificar(im){ 
    var i=new Image(); 
    i.onload=function(){ 
        var canvas=document.createElement('canvas'), 
        ctx=canvas.getContext('2d'); 
        canvas.width=300; 
        canvas.height=400; 
        ctx.drawImage(im,0,0,300,400); 
		console.log(canvas.toDataURL().split('base64,')[1]); 
         
    } 
    i.src=im; 
} 

       function fileSelected() {
         var file = document.getElementById('fileToUpload').files[0];
         if (file) {
 
		codificar(file);
         }

Tengo varios formularios concatenados en una web, y mi idea es guardar todo en el caché del navegador del usuario hasta que los finalice con el objetivo de reducir la carga del servidor, y eliminar la dependencia de otros lenguajes de programación. Puedo guardar todo en el navegador, incluso las imágenes si las convierto a base64, pero no logro hacer la conversión a base64 con javascript, y de ahí mi cuestión.

Alguna otra idea?