Geek Answers Handbook

How to upload an image to HTML5 canvas using Phonegap

Trying to upload an image to html5 canvas and then launch 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 included the standard img tag to demonstrate the problem.

In Firefox, this page correctly displays the image displayed on the canvas and in the standard img tag.

result under firefox

When I deploy Android emulator using Phonegap, only standard img is displayed.

result on Android emulator via Phonegap

Both html and .png files are in the assets / www folder of my phonegap project.

How can I display the image on canvas correctly?

EDIT .. Fixed (thanks to Avinash) .. all about timing .. you need to wait until img loads before drawing to .vis canvas

 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); };
+6
android html5 cordova canvas
source share
3 answers

This may be a delay in loading the image (this is just my guess, I'm not sure. If this helps, I will be glad) ...
Try this code (which waits until the page is fully loaded)

 <!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 loading the image 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 ...

+9
source share

I did not have the opportunity to try this, but try to reference your image as:

File: //android_asset/www/img_flwr.png

0
source share

I tried without the img tags for PhoneGap 1.1.0 Xcode 4.2, and when loading events of the Image () class it lights up, but the images report zero width and height. If img html tags are added, they work. So I think the device is ready - this is not the place for this, or it shows incompatibility with how the js programmer can expect events and sequence to work. When images popping up around the screen open up multiple resolution issues.

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

More articles:


All Articles