確保drawImage在HTML5畫布上繪製圖像

Question

我正在製作一個用於畫布的多選測驗遊戲，用戶可以上傳自己的圖像作爲多選答案。

當選擇下一個問題時，下一個問題的變量從javascript數組獲取，包括圖像的文件路徑。

我遇到的問題是，通常在第一次測驗中，圖像有時不能及時在畫布上繪製。我試圖通過確保總是繪製圖像答案來提高測驗畫布方面的性能。

幫助將不勝感激。在畫布上繪製圖像的代碼如下。

//else if answer type is image answer 
    else if(answertype == "image"){ 
     answerbg.src = "./resources/imageaudiovideoanswerbg.png"; 
     eventstate = 'imageaget'; 
     if (answerbg.complete) { 
     context.drawImage(answerbg, 0, 280); 
      context.drawImage(imagefilea,75,285); 
      context.drawImage(imagefileb,375,285); 
      context.drawImage(imagefilec,75,591); 
      context.drawImage(imagefiled,375,591); 
     } 
     else { 
       answerbg.onload = function() { 
       context.drawImage(answerbg, 0, 280); 
       context.drawImage(imagefilea,75,285); 
       context.drawImage(imagefileb,375,285); 
       context.drawImage(imagefilec,75,591); 
       context.drawImage(imagefiled,375,591); 
       }; 
      } 
     } 

Answer 1

您必須確保圖像已加載，然後才能在畫布上繪製。

所以，你會做什麼樣的財產以後：

var image = new Image(); //make a new image object 
image.onload = function() { //when the image has loaded... 
doStuffWithImage(); //Do somthing with it (draw it on canvas etc.) 
} 
image.src = '/your/path/image.png'; //set the source (afterwards!) 

這是你必須知道你用的圖像和帆布工作的東西。

此外，如果您在加載所有圖像時遇到問題，請使用preLoadAllImagesfromSource(sourceArray)函數，其中在執行主代碼時所有圖像對象都已預先加載。

希望有幫助。

Answer 2

或者，您可以考慮在JavaScript或HTML本身中使用BASE64編碼嵌入圖像和/或其他資源。

http://ejohn.org/blog/embedding-and-encoding-in-javascript/

當然，在你的情況，因爲它是用戶上傳的內容，您可能需要從上傳的圖片生成JavaScript。