图像在 Firefox 中不显示答案

【问题标题】：Image does not display in Firefox图像在 Firefox 中不显示
【发布时间】：2016-01-29 02:38:35
【问题描述】：

我想将 base64 中的 png 图像加载到 html5 画布元素。我有这个代码：

<html>
    <head></head>
    <body>
        <canvas id="pageCanvas"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("pageCanvas");
            var ctx = canvas.getContext("2d");
            var imageData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
            var imageObj = new Image();
            imageObj.src = imageData;
            ctx.drawImage(imageObj, 50, 100);
        </script>
    </body>
</html>

以上代码在 IE、chrome、Microsoft edge 中运行良好。但在 Firefox 中，图像未显示。它显示空白页。有时当我们重新加载页面时，它会在画布中显示一个图像。

非常感谢您的回答。

【问题讨论】：

您在控制台中看到任何 javascript 错误吗？
是的，同意 faheem。检查您的控制台是否有错误。我目前没有 Firefox，但您的代码可以在我的 IE 和 chrome 上运行
感谢您的指导。我检查了控制台，它没有显示任何与图像渲染相关的错误。

标签： javascript html image html5-canvas png

【解决方案1】：

这很糟糕：

var imageObj = new Image();
imageObj.src = imageData;
ctx.drawImage(imageObj, 50, 100);

您应该等待图像加载：

var imageObj = new Image();
imageObj.onload = function(){
   ctx.drawImage(imageObj, 50, 100);
}
imageObj.src = imageData;

如果您不需要回调，您可以等待图像完成 == true，但我不建议使用此代码

var imageObj = new Image();
imageObj.src = imageData;
while(!imageObj.complete){/**thread sleep wile image is not ready**/}
ctx.drawImage(imageObj, 50, 100);

【讨论】：

当我们使用图片加载来渲染html5画布中的图片内容时。它应该在页面加载时显示，因此显示会有些延迟。此外，如果我们在图像上方渲染形状或文本，则首先渲染形状，然后最终渲染图像。它隐藏文本或形状。
如果没有图像加载，您将无法做到这一点！如果它会工作，它会不稳定，取决于图像大小。它只能在运气的情况下工作。不稳定。
上述脚本在 IE、Chrome、Microsoft Edge 浏览器中渲染图像没有任何问题。但是在 Firefox 中显示图像有问题..
是幸运的工作。它工作是因为你的图像不是很大，浏览器有不同的引擎，并且以不同的方式完成加载和渲染任务。这意味着浏览器有不同的加载时间和渲染。一个浏览器可以很好地处理您的代码，但其他浏览器将无法正常工作。如果您有回调。所有浏览器都会正确执行您的代码。