如何使用 Phonegap 将图像加载到 HTML5 画布上答案

【问题标题】：How can I load an image onto the HTML5 Canvas using Phonegap如何使用 Phonegap 将图像加载到 HTML5 画布上
【发布时间】：2011-07-04 17:42:37
【问题描述】：

尝试将图像加载到 html5 画布上，然后使用 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 下，此页面正确显示了在画布上和标准 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);
};

【问题讨论】：

标签： android html canvas cordova

【解决方案1】：

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

<!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';

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

【讨论】：

感谢 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();
}

【讨论】：