Problema al cargar la cadena Base64 en el lienzo

Question

Estoy intentando cargar una cadena Base64 desde mi base de datos a un lienzo.

Obtuve esta cadena haciendo el método inverso: la guardé en mi base de datos después de dibujar en un lienzo. Entonces, ahora quiero volver a cargarlo en otro lienzo. He intentado este código que recogí en la web y en otro lugar aquí en StackOverflow, pero parece que no funciona.

<script type="text/javascript"> 
    $(document).ready(function(){ 
    var canvas = document.getElementById("loading_canvas"); 
    var ctx = canvas.getContext("2d"); 

    var image = new Image(); 

    $.post('doodles/load', function(data) { 
     image.src = data; 
    }); 
    ctx.drawImage(image, 0, 0); 
    }); 
</script> 

Cargo los datos de mi base de datos con una llamada ajax.

Si yo alert() var, data muestra la cadena codificada Base64. Entonces, realmente no sale mal allí. Acabo de terminar con un lienzo vacío todo el tiempo.

¿Alguien sabe lo que estoy haciendo mal aquí? ¡Muchas gracias!

Answer 1

Trata de dibujar la imagen después de evento de carga de la imagen:

var image = new Image(); 
image.onload = function() { 
    ctx.drawImage(image, 0, 0); 
} 

$.post('doodles/load', function(data) { 
    image.src = data; 
}); 

Los src necesidades de tener una URL completa de datos y no sólo un montón de datos base64, así que vuelva a comprobar que también. Ejemplo (de Wikipedia):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> 

Answer 2

si sus datos es una técnica de uri base 64 que debe moverse sólo una línea hacia arriba y todo está funcionando bien.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var canvas = document.getElementById("loading_canvas"); 
     var ctx = canvas.getContext("2d"); 

     var image = new Image(); 

     $.post('doodles/load', function(data) { 
     image.src = data; 
     ctx.drawImage(image, 0, 0); 
    }); 
    }); 
</script>