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

Question

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

6

尝试将图像加载到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加载完成。

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);
};

- Michael Dausmann

3个回答

0

我尝试了在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();
}

- MotionMaker

0

我还没有机会尝试这个，但请尝试将您的图像称为：

file://android_asset/www/img_flwr.png

- Simon MacDonald

嗨，Simon。谢谢你的回答。我尝试过这个方法，但无法引用图像。此外，我不太喜欢这种方法，因为它使代码具有 Android 特定性，这违背了使用 HTML5 和 Phonegap 的初衷（跨设备兼容性）。 - Michael Dausmann

除此之外，将图像加载到画布元素而不是直接使用的唯一目的是使用画布JS API，包括像素采样、绘制、动画等。 - alonisser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user372551 · Accepted Answer

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

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

请告诉我问题是否仍然存在...