确保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。