图像在 Firefox 中不显示

Question

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

<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 中没有显示图像。它显示空白页。有时当我们重新加载页面时，它会在 canvas.

中显示图像

非常感谢您的回答。

Answer 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;

如果不需要回调，可以等待image complete == true，但我不建议使用此代码

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

图像在 Firefox 中不显示

Image does not display in Firefox

html

javascript

png

image

html5-canvas