एचटीएमएल कैनवास छवि प्रदर्शित नहीं कर रहा है

Question

मुझे यकीन है कि यह कुछ आसान होना चाहिए जो मैं देख रहा हूं, लेकिन मुझे सर्वर पर संग्रहीत एक जेपीजी प्रदर्शित करने के लिए मेरा कैनवास नहीं मिल रहा है।

<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> 

<img> प्रदर्शित करता है के रूप में उम्मीद है, तथापि कैनवास हालांकि यह सही आयाम है लगता है खाली है,। कोई भी देखता है कि मैं क्या गलत कर रहा हूं?

मेरी थके हुए आंखें किसी भी मदद की सराहना करेंगे।

धन्यवाद

Answer 1

आप जब यह आकर्षित करने के लिए कोशिश कर रहा है निम्नलिखित दृष्टिकोण

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

उपयोग करें ताकि आप यह सुनिश्चित करें कि छवि भरी हुई है सकते हैं।

Answer 2

दस्तावेज़ लोड होने पर ऐसा करने का प्रयास करें। मुझे लगता है कि छवि उपलब्ध होने से पहले आपका कोड चल रहा है। आप यह भी पता लगा सकते हैं कि आईएमजी स्वयं लोड हो जाता है। See this।

Answer 3

शायद यह आपके शेष कोड के साथ कुछ करने के लिए है। कोड में "user_photo" पहचाना गया है?

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; 
} 

यह कोड अच्छी तरह से काम करता है।