如何使用 Phonegap 将图像加载到 HTML5 画布上
Posted
技术标签:
【中文标题】如何使用 Phonegap 将图像加载到 HTML5 画布上【英文标题】：How can I load an image onto the HTML5 Canvas using Phonegap 【发布时间】：2011-07-04 17:42:37 【问题描述】：尝试将图像加载到 html5 画布上，然后使用 Phonegap 在 android 上运行 html5。这是我的 HTML。
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" 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 下，此页面正确显示了在画布上和标准 img 标签中呈现的图像。
当我使用 Phonegap 部署到 Android 模拟器时，只有标准的 img 显示图片。
html 和 .png 文件都在我的 phonegap 项目的 assets/www 文件夹中。
如何让图像在画布上正确呈现？
编辑.. 已修复（感谢 Avinash）.. 一切都与时间有关.. 您需要等到 img 加载完毕后再绘制到画布上 ..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);
;
【问题讨论】：
【参考方案1】：这可能是加载图像的延迟（这只是我的猜测，我不确定。如果有帮助，我会很高兴）... 试试这个代码（等待页面完全加载）
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" 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';
如果问题仍然存在，请告诉我...
【讨论】：
感谢 Avinash.. img.onload 方法有效，但我在调用 img.src 之后将其放入（请参阅最终脚本的编辑） 顺便说一句 - 为什么在新图像之前而不是在 img.onload 函数中执行 getelement 和 getcontext 【参考方案2】：我没有机会尝试此操作，但尝试将您的图片称为：
file://android_asset/www/img_flwr.png
【讨论】：
嗨，西蒙.. 感谢您的回答。我确实尝试过，但无法让它引用图像。另外，我不太喜欢这种方法，因为它使代码特定于 Android，这首先破坏了使用 HTML5 和 Phonegap 的目的（跨设备兼容性) 此外-将img加载到canvas元素而不是直接使用的唯一一点是使用canvas js api-包括像素采样、绘图、动画等【参考方案3】：我尝试不使用 PhoneGap 1.1.0 Xcode 4.2 的 img 标签，并且 Image() 类 onload 事件会触发，但图像报告的宽度和高度为零。如果添加了 img html 标签，它们就可以工作。所以我认为设备就绪不是这样做的地方，或者这表明与 js 程序员可能期望事件和排序工作的方式不兼容。让图像在屏幕外浮动会引发多种分辨率的问题。
这是存根代码。
var tileLoaded = true;
var dirtLoaded = true;
function onBodyLoad()
document.addEventListener("deviceready", onDeviceReady, false);
/* When this function is called, PhoneGap has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iosdevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
// do your thing!
//navigator.notification.alert("PhoneGap is working");
console.log("device on ready started");
canvas = document.getElementById('myCanvas');
c = canvas.getContext('2d');
canvas.addEventListener('mousedown', handleMouseDown, false);
window.addEventListener('keydown', handleKeyDown, false);
tileMap = [];
tile.src = "img/tile.png";
//tile.onLoad = tileImageLoaded();
dirt.src = "img/dirt.png";
//dirt.onLoad = dirtImageLoaded();
console.log("device on ready ended");
draw();
function tileImageLoaded()
console.log("tile loaded");
console.log("draw - tile.width:" + tile.width);
console.log("draw - tile.height:" + tile.height);
tileLoaded = true;
draw();
function dirtImageLoaded()
console.log("dirt loaded");
console.log("draw - dirt.width:" + dirt.width);
console.log("draw - dirt.height:" + dirt.height);
dirtLoaded = true;
draw();
【讨论】：
以上是关于如何使用 Phonegap 将图像加载到 HTML5 画布上的主要内容，如果未能解决你的问题，请参考以下文章
是否可以将 HTML 文件添加为 Phonegap iOS 应用程序的启动画面
Phonegap Windows Phone 7 动态 HTML 加载和使用 jQuery 的跨域调用
Phonegap/Cordova 在 iphone 上加载时将启动图像旋转 90 度