如何使用Phonegap將圖像加載到HTML5畫布上

試圖將圖像加載到html5畫布上，然後使用Phonegap在Android上運行html5。這是我的HTML。如何使用Phonegap將圖像加載到HTML5畫布上

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

當我使用的PhoneGap部署到Android模擬器，只有標準IMG顯示圖片。

result on Android emulator via Phonegap

HTML和.png文件都在我的PhoneGap項目的資產/ WWW文件夾。

如何讓圖像在畫布上正確呈現？

編輯..固定（感謝阿維納什）..它的所有關於時間..你需要等到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); 
};

來源

2011-02-26 Michael Dausmann

這可能是加載圖像延遲（這只是我的猜測，我不知道。如果有幫助，我會很高興）......
試試這個代碼（等待，直到頁面完全加載）

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

請讓我知道，如果問題仍然存在......

來源

2011-02-26 18:13:45

由於阿維納什..的img.onload方法工作，但我把它，來電後img.src（見編輯最終腳本）的方式 – 2011-02-26 23:09:08

- 爲什麼做新的圖像前getelement和的getContext和不在img.onload函數 – alonisser 2011-10-18 15:22:22

我還沒有機會嘗試這一點，但嘗試是指你的形象：

文件：//android_asset/www/img_flwr.png

來源

2011-02-26 18:59:47

嗨西蒙..感謝您的答案。我確實嘗試過，但無法獲取它引用的圖像..另外，我不太喜歡這種方法，因爲它使得Android特有的代碼首先破壞了使用HTML5和Phonegap的目的（跨設備兼容性） – 2011-02-26 23:03:47

此外 - 將img加載到canvas元素而不是直接使用的唯一要點是使用canvas js api - 包括像素採樣，繪圖，動畫等 – alonisser 2011-10-18 15:18:49

我試着不爲的PhoneGap的IMG標籤1.1.0的Xcode 4.2和圖像（）類的onload事件觸發，但圖像報告零個的寬度和高度。如果添加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(); 
}

來源

2011-10-28 02:00:59 MotionMaker

如何使用Phonegap將圖像加載到HTML5畫布上

回答

相關問題