Base PNG de datos al lienzo HTML5

Quiero cargar una imagen PNG codificada en Base64 al elemento canvas. Tengo este código:Base PNG de datos al lienzo HTML5

<html> 
<head> 
</head> 
<body> 
<canvas id="c"></canvas> 
<script type="text/javascript"> 

var canvas = document.getElementById("c"); 
var ctx = canvas.getContext("2d"); 

data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; 

ctx.drawImage(data, 0, 0); 

</script> 
</body> 
</html>

En Chrome 8 me sale el error: Uncaught TypeError: Type error

Y en Firefox Firebug esto: "El tipo de un objeto es incompatible con el tipo esperado del parámetro asociado al objeto "código:" 17 "

En esa base64 hay 5x5px negro PNG cuadrado que he hecho en GIMP y lo gano a base64 en el programa base64 de GNU/Linux.

Fuente

2010-12-10 Tomáš Nesrovnal

107

Por el aspecto de que lo necesario para pasar realmente drawImage un objeto de imagen al igual que

var canvas = document.getElementById("c"); 
 
var ctx = canvas.getContext("2d"); 
 

 
var image = new Image(); 
 
image.onload = function() { 
 
    ctx.drawImage(image, 0, 0); 
 
}; 
 
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

<canvas id="c"></canvas>

Lo he intentado en cromo y trabaja muy bien.

Fuente

2010-12-10 14:27:10 Jerryf

Buena respuesta, pero ¿está seguro de que esto funciona todo el tiempo? Me pareció problemático dibujar una imagen inmediatamente después de configurar 'src', porque se supone que debes usar la devolución de llamada' onload' para asegurarte de que la imagen haya terminado de cargarse. El 50% de mis pruebas fallaron porque la imagen no había terminado de cargarse. –

¡Guau! Explosión del pasado :). Estás en lo cierto. Si llama a drawImage justo después de configurar el src de la imagen, es probable que se encuentre con problemas y, dependiendo de su situación, lo más probable es que desee utilizar onload para asegurarse de que la imagen se cargue antes de intentar renderizar. al lienzo. El código anterior era solo más un ejemplo que muestra que drawImage en realidad requiere un objeto de imagen y cómo pasarle eso. – Jerryf

Al igual que una nota, si está recorriendo un número de lienzos, puede querer cambiarlo a 'ctx.drawImage (this, 0,0);' para que se asegure de que la variable de imagen se refiere a la imagen correcta. ¡Gran respuesta! – Dormouse

La respuesta de Jerryf está bien, excepto por un defecto.

The onload event should be set before the src. Sometimes the src can be loaded instantly and never fire the onload event.

(igual que Totty.js señaló.)

var canvas = document.getElementById("c"); 
var ctx = canvas.getContext("2d"); 

var image = new Image(); 
image.onload = function() { 
    ctx.drawImage(image, 0, 0); 
}; 
image.src = "data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";

Fuente

2015-04-24 15:07:23 John

Por cierto: edité la respuesta de Jerryf, pero alguien lo rechazó. No puede haber sido Jerryf, ya que su perfil dice que se conectó por última vez en 2014. – John

** "A veces, el src se puede cargar al instante y nunca desencadenar el evento de carga." ** Creo que la ocurrencia de esto es extremadamente raro que casi nunca, pero no hay razón para no convertirlo en un hábito de "cargar" antes de 'src' ... Lo hago como un hábito para hacerlo. – markE

Respuesta

Cuestiones relacionadas