个人中心
gpt4 book ai didi

javascript - 图像在 Firefox 中不显示

转载 作者：行者123 更新时间：2023-11-30 16:30:27 25 4
gpt4 key购买 nike

我想将 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 中显示图像。

非常感谢您的回答。

最佳答案

这很糟糕:

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;

如果不需要回调，可以wait 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);

关于javascript - 图像在 Firefox 中不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33406021/

25 4 0
文章推荐： c - 通过 C 中的 MQTT 连接到 Google IoT 核心的问题
文章推荐： c# - Autofac:如何在依赖于另一个对象函数输出的类上使用构造注入(inject)
文章推荐： c - 如何在 QNX Momentics 6.5 中使用不同的编译标准？
文章推荐： c# - Rhinomocks - 模拟代表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com