HTML Canvas non visualizza immagine

Question

Sono sicuro che questo deve essere qualcosa di semplice che sto trascurando, ma non riesco a ottenere la mia tela per visualizzare un jpg memorizzato sul server.

<img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/> 
<canvas id="user_photo" style="position:relative;"></canvas> 
<script type="text/javascript"> 
    var image = new Image(); 
    image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"; 
    var pic = document.getElementById("user_photo"); 
    pic.getContext('2d').drawImage(image, 0, 0); 
</script> 

le <img> visualizzata come previsto, tuttavia la tela è vuota, anche se sembra avere le dimensioni corrette. Qualcuno capisce cosa sto sbagliando?

I miei occhi stanchi apprezzeranno qualsiasi aiuto.

Grazie

Answer 1

si consiglia di utilizzare il seguente approccio

image.onload = function() { 
    pic.getContext('2d').drawImage(image, 0,0); 
} 

modo si assicura che l'immagine viene caricata quando si cerca di disegnare.

Answer 2

Provate a farlo quando il documento viene caricato. Ho la sensazione che il tuo codice sia in esecuzione prima che l'immagine sia disponibile. Puoi anche rilevare quando viene caricata la stessa img. See this.

Answer 3

Forse è qualcosa a che fare con il resto del codice. "User_photo" è identificato nel codice?

Answer 4

var initialFloorplanWidth = 0; 
var initialFloorplanHeight = 0; 
var canvasImage = new Image(); 
documentReady = function() { 
    preloadFloorplan(); 
} 
preloadFloorplan = function() { 
    onLoad = function() { 
     initialFloorplanHeight = canvasImage.height; 
     initialFloorplanWidth = canvasImage.width; 
     var canvasHtml = '<canvas id="MainCanvas" width="' + initialFloorplanWidth + '" height="' + initialFloorplanHeight + '">Canevas non supportés</canvas>'; 
     $("#MainContainer").append(canvasHtml); 
     var canvas = $("#MainCanvas")[0]; 
     var canvasContext = canvas.getContext("2d"); 
     canvasContext.drawImage(canvasImage, 0, 0); 
    } 
    canvasImage.onload = onLoad; 
    canvasImage.src = initialFloorplan; 
} 

Questo codice funziona bene.