Как загрузить изображение на холст HTML5 с помощью Phonegap

Попытка загрузить изображение на холст html5, а затем запустить html5 на Android с помощью Phonegap. Вот мой 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.

Результат в Firefox

Когда я развертываю эмулятор Android с помощью Phonegap, отображается только стандартный img.

Результат на эмулятор Android через Phonegap

И html, и файл .png находятся в папке assets / www моего проекта phonegap.

Как я могу правильно отобразить изображение на холсте?

EDIT .. Исправлено (спасибо 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); }; 

Это может быть задержка в загрузке изображения (это просто угадай, я не уверен. Если это поможет, я буду рад) …
Попробуйте этот код (который ждет, пока страница будет загружена полностью)

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

Пожалуйста, дайте мне знать, если проблема по-прежнему сохраняется …

У меня не было возможности попробовать это, но попробуйте сослаться на ваш образ как:

Файл: //android_asset/www/img_flwr.png

Я пробовал без тегов img для PhoneGap 1.1.0 Xcode 4.2, а при загрузке событий класса Image () загорался, но изображения сообщают о нулевой ширине и высоте. Если теги 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(); }