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。

确保drawImage在HTML5画布上绘制图像

2 个答案: