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边缘运行良好。但是在Firefox中没有显示图像。它显示空白页面。有时当我们重新加载页面时，它会在画布上显示一个图像。

非常感谢您的回答。

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中不显示图像

1 个答案: