Блог

Я пытаюсь нарисовать изображения, которые я извлек из Flickr, через canvas, и это фрагмент моих кодов.

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

и помогает? заранее благодарю вас.

Из-за вашей ограниченной информации сложно что-либо протестировать для вас или повторить вашу ошибку, но я думаю, что могу помочь.

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);