Javascript dibuje una imagen dinámica desde el elemento URL en el lienzo

Question

Estoy intentando dibujar una imagen PNG dinámica (una generada por un script PHP) en un elemento Canvas utilizando su URL. Realmente no puedo publicar URL exactas para las páginas en las que estoy probando esto, ya que debe haber iniciado sesión en el sitio web.

Un ejemplo de una de las URL de la imagen dinámica que estoy usando es: http://www.website.com/includes/dynamicimage.php?ID=29718958161

Si había iniciado sesión en este sitio web en particular y pegar la URL en la barra de direcciones, sería mostrar correctamente la imagen. Sin embargo, el siguiente código Javascript no está llegando correctamente en el elemento canvas:

function checkImage(imageContext) { 
    var canvas = document.createElementNS(
     'http://www.w3.org/1999/xhtml', 'canvas'); 
    canvas.width = imageContext.width; 
    canvas.height = imageContext.height; 

    var context = canvas.getContext("2d"); 
    var img = new Image(); 
    img.src = imageContext.src; 
    context.drawImage(img, 0, 0); 

    newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300'); 
    newWindow2 = window.open('', 'newWin2', 'width=300,height=300'); 
    newWindow2.document.body.appendChild(canvas); 

    var imgd = context.getImageData(0, 0, imageContext.width, 
     imageContext.height); 
    var pix = imgd.data; 
} 

estoy teniendo dos pop-up display ventanas tanto la imagen dinámica y lo que está dibujado a la lona, ​​pero la tela es siempre blanco. Luego estoy intentando realizar más pruebas RGB en la imagen después de configurar la variable "pix", pero dado que la imagen nunca se dibuja en el elemento canvas, este paso falla.

Answer 1

Su problema es que no está esperando que la imagen se cargue antes de intentar dibujarla en el lienzo. Consulte la sección titulada "Jugando seguro" en this question para obtener más información.

En resumen:

var img = new Image;  // First create the image... 
img.onload = function(){ // ...then set the onload handler... 
    ctx.drawImage(img,0,0); 
}; 
img.src = "someurl";  // *then* set the .src and start it loading.