JavaScript无法加载图像

Question

I'm currently getting familiar with HTML 5 and Javascript and am currently trying to load and draw images to a HTML 5 canvas with Javascript. 目前，我已经熟悉HTML 5和Javascript，并且正在尝试使用Javascript将图像加载并绘制到HTML 5画布上。 Here's the HTML code: 这是HTML代码：

<html>
    <head>
        <title>Adam Leung</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/main.js"></script>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <h1>pegGame</h1>
        <canvas id="mainCanvas" onload="" onclick="test()" width="800" height="480"></canvas>
        <a><br>by: Adam Leung</a>
    </body>
</html>

Here is the javascript code: 这是JavaScript代码：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();
    logoImage.src = "img/gameLogo.png";
    alert(logoImage.width);
    mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
}

and here is the file structure: 这是文件结构：

/Site Root
   -/css
      -style.css
   -/img
      -gameLogo.png
   -/js
      -main.js
-index.html

gameLogo.png is just a image that's 300px by 300px. gameLogo.png只是300px x 300px的图像。 I am lead to believe that when I load the index.html and click inside the canvas, it should print "300" in a popup and draw gameLogo.png onto the canvas. 我相信，当我加载index.html并在画布内单击时，它将在弹出窗口中打印“ 300”，并将gameLogo.png绘制到画布上。 When I do click the canvas, a popup comes up with "0" and no image draws, what's going on? 当我单击画布时，弹出窗口显示“ 0”并且没有图像绘制，这是怎么回事？ (Edit: I am testing in the latest version of Chrome) （编辑：我正在测试最新版本的Chrome）

Much thanks. 非常感谢。

Answer 1

Add an onload handler to the image and you should be good to go: 在图像上添加一个onload处理程序，您应该会很好：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();

    logoImage.onload = loadingDone;      // here before setting src

    logoImage.src = "img/gameLogo.png";

    function loadingDone() {             // gets called when done
        alert(logoImage.width);
        mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
    }
}

Image loading is asynchronous so you need to use callbacks. 图像加载是异步的，因此您需要使用回调。 If not the code will just continue and try to draw the image before it has finished loading (which will turn out as a blank image). 否则，代码将继续并尝试在完成加载之前绘制图像（结果将显示为空白图像）。

Also use a callback for errors ( onerror ). 还可以使用错误回调（ onerror ）。

Answer 2

The drawImage() method requires an image object. drawImage()方法需要一个图像对象。 Create an image and wait for it to load before calling drawImage() . 创建一个图像并等待其加载，然后再调用drawImage() 。 Use onload method. 使用onload方法。

something like, 就像是，

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 50);
  };
  imageObj.src = '../img/gameLogo.png';

JavaScript无法加载图像

问题描述

2 个解决方案

解决方案1
3 已采纳

解决方案2
1 2014-03-12 04:16:28

JavaScript无法加载图像

问题描述

2 个解决方案

解决方案1 3 已采纳

解决方案2 1 2014-03-12 04:16:28

解决方案1
3 已采纳

解决方案2
1 2014-03-12 04:16:28