0

我有以下函数，用于将 HTML 中隐藏部分的图像加载到 JavaScript 数组中：

window.onload = function(){
console.log("src " + document.getElementById("building").src);
    var sources = {};
        sources[0] = document.getElementById("building").src,
        sources[1] = document.getElementById("chair").src,
        //sources[2] = document.getElementById("drink").src

    loadImages(sources, drawImage);
};

一旦图像被加载到 JS 数组中，我调用“loadImages”函数：

function loadImages(sources, callback){
    var imagesDir = "";
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    console.log("length " + sources.length);
    for (var src in sources){
        numImages++;
    }
    console.log("Num Images " + numImages);

    var index=0;
    console.log("length " + sources.length);
    for (index=0;index < numImages ;index++){
        console.log(index);
        images[index] = new Image();
        images[index].src = imagesDir + sources[index];
        console.log("Adding " + sources[index]);
        callback(images[index]);
    }

    stage.add(imagesLayer); // should only be added once!!
}

依次调用 drawImage() 方法：

function drawImage(imageObj) {
    //var layer = new Kinetic.Layer();

    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: stage.getWidth() / 2 - 50 / 2,
      y: stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

    // add cursor styling
    canvasImage.on('mouseover', function() {
      document.body.style.cursor = 'pointer';
    });
    canvasImage.on('mouseout', function() {
      document.body.style.cursor = 'default';
    });

    imagesLayer.add(canvasImage);
  }

此方法将图像绘制到画布的中心，并将它们的 'draggable' 属性设置为 true，以便可以在画布周围拖放它们。

JavaScript 全部在我的页面中，并且在我有一个隐藏部分中，我想在画布上绘制的所有图像都首先被加载。我这样做是因为它使图像在浏览器中加载和显示的速度比直接从源代码加载到 JavaScript 中要快得多。

图像使用以下 HTML 加载：

<img id="building" src="images/assets/building.png" alt="Asset" />
<img id="chair" src="images/assets/chair.gif" alt="Asset" />
<img id="drink" src="images/assets/drink.gif" alt="Asset" />
<img id="food" src = "images/assets/food.gif" alt="Asset"/>

我正在将大约 40 张左右的图片加载到 HTML 中

目前我在画布上绘制了两个图像，“建筑”和“椅子”，但是由于某种原因，当我取消注释将sources[2] = document.getElementById("drink").src第三个图像绘制到画布上并在浏览器中查看页面时，我的画布没有t 显示在屏幕上，我得到一个控制台错误，上面写着，

未捕获的异常：[异常...“组件返回失败代码：0x80040111（NS_ERROR_NOT_AVAILABLE）[nsIDOMCanvasRenderingContext2D.drawImage]”nsresult：“0x80040111（NS_ERROR_NOT_AVAILABLE）”位置：“JS 框架 :: http://www.html5canvastutorials.com/libraries /kinetic-v4.1.2.js :: :: line 4222" 数据：无]

我正在使用 Kinetic.js 库 (http://kineticjs.com/)，在我看来，这个错误似乎在库中......

有谁知道是否是这种情况？或者我的代码中有什么地方做错了导致这个错误发生？

4

2 回答 2

0

这不是库中的错误，而是该图像的错误。要么获取错误的 src 属性，要么该位置不存在该图像。确保您的网址、文件类型/名称正确。

于 2012-12-12T13:24:26.960 回答
0

试试这个

   var img = new Image();
    img.onload = function()
    {
        // some code here
    }
    img.src = 'assets/.../image.png';
于 2012-12-13T11:52:44.720 回答