如何使用 Phonegap 将图像加载到 HTML5 Canvas 上

发布于 2024-10-19 20:12:51 字数 1238 浏览 3 评论 0原文

尝试将图像加载到 html5 画布上，然后使用 Phonegap 在 Android 上运行 html5。这是我的 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 下的结果

当我使用 Phonegap 部署到 Android 模拟器时，只有标准 img 显示图片。

result on Android emulator via Phonegap

html 和.png 文件都位于我的phonegap 项目的assets/www 文件夹中。

如何使图像在画布上正确渲染？

编辑..已修复（感谢 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);
};

原文

Trying to load an image into onto an html5 canvas and then running the 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 have included the standard img tag to demonstrate the problem.

Under Firefox, this page correctly shows the image rendered on the canvas and in the standard img tag.

result under Firefox

When I deploy to Android emulator using Phonegap, only the standard img displays the picture.

result on Android emulator via Phonegap

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

How can I get the image to render correctly on the canvas?

EDIT.. Fixed (thanks Avinash).. its all about timing.. you need to wait until the img is loaded before drawing onto the canvas ..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);
};

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

给妤﹃绝世温柔 2024-10-26 20:12:51

这可能是加载图像的延迟（这只是我的猜测，我不确定。如果它有帮助，我会很高兴）...
尝试此代码（等待页面完全加载）

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

请告诉我问题是否仍然存在...

It might be the delay in loading the image(it's just a Guess of mine, I'm not sure. If it helps I'll be Glad) ...

Try this code(which waits until the page is loaded completely)

<!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 the Image is loaded 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 ...

回复收藏 0 原文

紫﹏色ふ单纯 2024-10-26 20:12:51

我还没有机会尝试这个，但尝试将您的图像引用为：

file://android_asset/www/img_flwr.png

回复收藏 0 原文

稀香 2024-10-26 20:12:51

我尝试不使用 PhoneGap 1.1.0 Xcode 4.2 的 img 标签，并且 Image() 类 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();
}

I tried without the img tags for PhoneGap 1.1.0 Xcode 4.2 and the Image() class onload events fire but the images report zero widths and heights. If the img html tags are added they work. So I am thinking device ready is not a place to do this or this shows an incompatibility with how a js programmer might expect the events and sequencing to work. Having the images floating around off screen open issues with multiple resolutions.

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 原文

~没有更多了~