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

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

6 голосов
/ 26 февраля 2011

Попытка загрузить изображение на холст 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тег.

result under Firefox

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

result on Android emulator via 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);
};

Ответы [ 3 ]

9 голосов
/ 26 февраля 2011

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

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

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

0 голосов
/ 28 октября 2011

Я пытался без тегов img для PhoneGap 1.1.0 Xcode 4.2 и событий onload класса Image () срабатывать, но изображения сообщают о нулевой ширине и высоте.Если HTML-теги img добавлены, они работают.Поэтому я думаю, что устройство готово - не место для этого, или это показывает несовместимость с тем, как программист 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();
}
0 голосов
/ 26 февраля 2011

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...