How can I load an image onto the HTML5 Canvas using Phonegap

问题

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>

I have included the standard img tag to demonstrate the problem.

Under Firefox, this page correctly shows the image rendered on the canvas and in the standard img tag.

When I deploy to Android emulator using Phonegap, only the standard img displays the picture.

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

回答1:

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 ...

回答2:

I haven't had a chance to try this but try to refer to your image as:

file://android_asset/www/img_flwr.png

回答3:

I tried without the img tags for PhoneGap 1.1.0 Xcode 4.2 and the Image() class onload events fire but the images report zero widths and heights. If the img html tags are added they work. So I am thinking device ready is not a place to do this or this shows an incompatibility with how a js programmer might expect the events and sequencing to work. Having the images floating around off screen open issues with multiple resolutions.

Here is the stub code.

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

来源：https://stackoverflow.com/questions/5124892/how-can-i-load-an-image-onto-the-html5-canvas-using-phonegap

标签

android

html

canvas

cordova