¿Cómo puedo cargar una imagen en el lienzo de HTML5 con Phonegap

? Intentar cargar una imagen en un lienzo html5 y luego ejecutar el html5 en Android utilizando Phonegap. Aquí está mi HTML.¿Cómo puedo cargar una imagen en el lienzo de HTML5 con Phonegap

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

He incluido la etiqueta img estándar para demostrar el problema.

En Firefox, esta página muestra correctamente la imagen representada en el lienzo y en la etiqueta img estándar.

result under Firefox

Cuando despliego al emulador de Android usando Phonegap, sólo el img estándar muestra la imagen.

result on Android emulator via Phonegap

Tanto el html y el archivo .png son activos en la carpeta/www de mi proyecto PhoneGap.

¿Cómo puedo obtener la imagen para que se reproduzca correctamente en el lienzo?

EDITAR .. fijo (gracias Avinash) .. todo es cuestión de tiempo .. hay que esperar hasta que el IMG se carga antes de dibujar en el lienzo ..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); 
};

Fuente

2011-02-26 Michael Dausmann

que podría ser el retraso en la carga de la imagen (que es sólo una suposición mía, no estoy seguro. Si ayuda estaré encantado) ...
probar este código (que espera hasta que la página se carga por completo)

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

O puede hacer después se carga la imagen de la siguiente manera

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

Por favor, hágamelo saber si el problema persiste ...

Fuente

2011-02-26 18:13:45

Gracias Avinash .. img.onload el método funcionó, pero lo puse después de la llamada a img.src (ver edición de guión final) –

por cierto - ¿por qué hacer el getElement y getcontext antes de la nueva imagen y no en la función img.onload – alonisser

no he tenido la oportunidad de probar esto, pero tratar de hacer referencia a su imagen como:

archivo: //android_asset/www/img_flwr.png

Fuente

2011-02-26 18:59:47

Hola Simon ... Gracias por la respuesta. Lo intenté pero no pude obtenerlo para hacer referencia a la imagen. Además, este método no me gusta realmente, ya que hace que el código sea específico de Android, lo que frustra el propósito de usar HTML5 y Phonegap en primer lugar (compatibilidad entre dispositivos) –

además: el único punto de cargar el img en el elemento canvas en lugar de usarlo directamente es utilizar el canvas js api, que incluye el muestreo de píxeles, el dibujo, la animación, etc. – alonisser

probé sin las etiquetas img para PhoneGap 1.1.0 Xcode 4.2 y la imagen) clase de eventos onload incendios (pero las imágenes informan cero anchuras y alturas. Si se agregan las etiquetas img html, funcionan. Así que estoy pensando que el dispositivo listo no es un lugar para hacer esto o esto muestra una incompatibilidad con la forma en que un programador js podría esperar que los eventos y la secuencia funcionen. Tener las imágenes flotando alrededor de la pantalla abre problemas con múltiples resoluciones.

Aquí está el código auxiliar.

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

Fuente

2011-10-28 02:00:59 MotionMaker

¿Cómo puedo cargar una imagen en el lienzo de HTML5 con Phonegap

Respuesta

Cuestiones relacionadas