gpt4 book ai didi

android - 如何使用 Phonegap 将图像加载到 HTML5 Canvas

转载 作者:太空狗 更新时间:2023-10-29 14:54:23 28 4
gpt4 key购买 nike

尝试将图像加载到 html5 Canvas 上,然后使用 Phonegap 在 Android 上运行 html5。这是我的 HTML。

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png"
cxt.drawImage(img,0,0);
</script>
<img src="img_flwr.png"/>
</body>
</html>

我已经包含了标准的 img 标签来演示这个问题。

在 Firefox 下,此页面正确显示在 Canvas 和标准 img 标记中呈现的图像。

result under Firefox

当我使用 Phonegap 部署到 Android 模拟器时,只有标准 img 显示图片。

result on Android emulator via Phonegap

html 和 .png 文件都在我的 phonegap 项目的 assets/www 文件夹中。

如何让图像在 Canvas 上正确呈现?

EDIT.. Fixed(感谢 Avinash).. 一切都与时间有关.. 你需要等到 img 加载后再绘制到 Canvas 上..vis

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="img_flwr.png";
img.onload = function() {
cxt.drawImage(img,0,0);
};

最佳答案

这可能是加载图像的延迟(这只是我的猜测,我不确定。如果它有帮助,我会很高兴)......
试试这段代码(等待页面完全加载)

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function() {
var c=document.getElementById('myCanvas');
var cxt=c.getContext('2d');
var img=new Image();
img.src='img_flwr.png';
cxt.drawImage(img,0,0);
};
</script>
<img src="img_flwr.png"/>
</body>
</html>

或者你可以在图片加载完成后做如下操作

var c=document.getElementById('myCanvas');
var cxt=c.getContext('2d');
var img=new Image();
img.onload = function() {
cxt.drawImage(img,0,0);
};
img.src='img_flwr.png';

如果问题仍然存在,请告诉我......

关于android - 如何使用 Phonegap 将图像加载到 HTML5 Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5124892/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com