尝试通过画布绘制图像时出现异常

Question

我正在尝试通过画布绘制从 Flickr 获取的图片，这是我的代码片段。

for(var i=0;i<document.getElementsByClassName("canvas").length;++i)
            {
                //randomly select one photo
                var picinfo = photos[Math.floor(Math.random()*photos.length)];
                var img = new Image(); 
                //get the pic URL
                img.src = "http://farm" + picinfo.farm + ".static.flickr.com/"
                + picinfo.server + "/" + picinfo.id + "_" + picinfo.secret + "_m.jpg";

                var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');

                console.log(img);

                // Draw slice
                ctx.drawImage(img, 10, 10);
                // Draw frame
                //ctx.drawImage(document.getElementById('frame'),132,150);
            }

它一直有效，直到实际绘制图片为止

ctx.drawImage(img, 10, 10);

，它会抛出我不知道的异常。

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost:8080/static/js/Gallery.js :: anonymous :: line 25" data: no]

我想图像获取没有任何问题，因为我可以在 Firebug 中看到获取的图片，例如

<img src="http://farm6.static.flickr.com/5226/5624531777_4a05934fc1_m.jpg">

有帮助吗？先感谢您。

Answer 1

根据您有限的信息，很难为您测试任何内容或重复您的错误，但我想我可以提供帮助。

NS_ERROR_NOT_AVAILABLE 可能是由于尝试过快地进行过多的调用，但我不太确定。

即使不是，我们也可以通过稍微重新安排代码来认真尝试解决这个问题。我们不会快速浏览每张图像，而是抓取一张图像，等待其加载，绘制该图像，然后继续处理下一张图像。

我在下面重新排列了您的代码，但尚未对其进行测试 - 您必须这样做！ - 因为我没有你做的所有作品。

这不一定是最佳方法，但正如所写，它应该有效

function drawOne(i) {
  //randomly select one photo
  var picinfo = photos[Math.floor(Math.random()*photos.length)];
  var img = new Image(); 
  //get the pic URL
  img.src = "http://farm" + picinfo.farm + ".static.flickr.com/"
  + picinfo.server + "/" + picinfo.id + "_" + picinfo.secret + "_m.jpg";

  // When the image is done loading this will execute
  img.onload = function() {
    var ctx = document.getElementsByClassName("canvas")[i].getContext('2d');

    console.log(img);

    // Draw slice
    ctx.drawImage(img, 10, 10);
    // Draw frame
    //ctx.drawImage(document.getElementById('frame'),132,150);

    // we're done with this image? call drawOne again!
    // We may have to wait for a second here... but maybe not.
    i++;
    if (i !== document.getElementsByClassName("canvas").length) {
      drawOne(i);
    }
  }
}

// Get things started
drawOne(0);