如何使用Phonegap将图像加载到HTML5画布上 [英] How can I load an image onto the HTML5 Canvas using Phonegap
问题描述
尝试将图像加载到html5画布上，然后使用Phonegap在Android上运行html5。这是我的HTML。
Trying to load an image into onto an html5 canvas and then running the html5 on Android using Phonegap. Here is my 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标签来演示这个问题。
I have included the standard img tag to demonstrate the problem.
在Firefox下，此页面正确显示在画布和标准img标签中呈现的图像。
Under Firefox, this page correctly shows the image rendered on the canvas and in the standard img tag.
当我使用Phonegap部署到Android模拟器时，只有标准的img显示图片。
When I deploy to Android emulator using Phonegap, only the standard img displays the picture.
html和.png文件都在资产/ www。我的phonegap项目的文件夹。
Both the html and the .png file are in the assets/www folder of my phonegap project.
如何让图片在画布上正确显示？
How can I get the image to render correctly on the canvas?
EDIT ..修正（感谢Avinash）..它的所有关于时间..你需要等待img加载之前绘制到画布上..vis
EDIT.. Fixed (thanks Avinash).. its all about timing.. you need to wait until the img is loaded before drawing onto the 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);
};
推荐答案
这可能是加载图像的延迟如果它有帮助我会很高兴）...
尝试这个代码（等待页面完全加载）
It might be the delay in loading the image(it's just a Guess of mine, I'm not sure. If it helps I'll be Glad) ...
Try this code(which waits until the page is loaded completely)
<!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>
或者您可以按照以下方式加载图片后执行
Or you can do after the Image is loaded as follows
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';
请让我知道问题是否仍然存在...
Please let me know if the problem still persists ...
这篇关于如何使用Phonegap将图像加载到HTML5画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
