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

【问题标题】：Making sure drawImage draws the image on HTML5 canvas确保 drawImage 在 HTML5 画布上绘制图像
【发布时间】：2013-03-28 19:57:32
【问题描述】：

我正在为画布制作一个多项选择测验游戏，用户可以在其中上传自己的图像以获得多项选择答案。

选择下一个问题时，下一个问题的变量来自JavaScript数组，包括图像的FilePath。

我遇到的问题是，通常在第一次尝试测验时，图像有时无法及时加载以在画布上绘制。我正在尝试通过确保始终绘制图像答案来提高测验画布端的性能。

我们将不胜感激。在画布上绘制图像的代码如下。

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

【问题讨论】：

标签： javascript html5-canvas drawimage

【解决方案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) 函数，在执行主代码时，所有图像对象都已预先加载。

希望有所帮助。

【讨论】：

抱歉耽搁了，实现了这一点，图像往往会加载大部分时间，但有时会失败。感谢您的帮助。

【解决方案2】：

或者，您可以考虑在 JavaScript 或 HTML 本身中使用 BASE64 编码嵌入图像和/或其他资源。

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

当然，在您的情况下，由于它是用户上传的内容，您可能必须从上传的图像生成 JavaScript。

【讨论】：