NS_ERROR_NOT_AVAILABLE: компонент недоступен

У меня проблема. Я пытаюсь нарисовать изображение на холсте. Изображение не со страницы HTML, а файла. Вот код, который я использую:

var img = new Image();
img.src = "/images/logo.jpg";
this._canvas.drawImage(img, 300, 300);// this is line 14

теперь, вот проблема. Это не работает на Firefox и IE10 (я еще не тестировал другие браузеры). В Firefox (21) я получаю:

[19:09:02.976] NS_ERROR_NOT_AVAILABLE: Component is not available @ file:///D:/Watermellon/scripts/base-classes.js:14

и на IE10 я получаю:

SCRIPT16389: Unspecified error. 
base-classes.js, line 14 character 13

Файлы и их каталоги:

root/index.html  
root/scripts/base-classes.js  
root/images/logo.jpg

Теперь, когда я меняю img.src на URL-адрес (изображение с другого сайта), все работает нормально, изображение затягивается после задержки (для него получается из URL-адреса). Что я делаю неправильно?

Ответ 1

Я предполагаю, что проблема в том, что изображение еще не загружено, прежде чем пытаться его использовать. Попробуйте следующее:

var img = new Image();
img.onload = function () {
    this._canvas.drawImage(img, 300, 300);// this is line 14
};
img.src = "images/logo.jpg";

Свойству src присваивается после привязка события, поскольку событие кэшированного изображения load запускается немедленно (что является общей проблемой в IE).

И в соответствии с вашей структурой путь к изображению, вероятно, будет images/logo.jpg (удаление первого /)

Ответ 2

Вам нужно дождаться загрузки изображения, прежде чем пытаться нарисовать его на холсте:

var img = new Image();
img.src = "/images/logo.jpg";
img.onload = function () {
  this._canvas.drawImage(img, 300, 300);// this is line 14
}

Ответ 3

Проблема, которую я предполагаю здесь, когда ресурсы доступны?, но есть способ подтвердить доступность ресурсов, просто проверьте атрибут "complete" объекта изображения.

if (img.complete == true){
   // is available.
} else {
   // wait until is ready.
}

Кроме того, вы можете создать метод слияния с событием onload и методом задержки, который проверяет оба материала.

var img = new Image();
//first attach handler
img.onload = function(e){
   if (e.target.complete == true) {
            yourHandler(e);
        } else {               
            var maxTimes = 10;
            var countTimes = 0;
            function retryLoadImage() {
                setTimeout(function () {
                    if (countTimes > maxTimes) {
                        // -- cannot load image.
                        return;
                    } else {
                        if (e.target.complete == true) {
                            yourHandler(e);
                        } else {
                            retryLoadImage();
                        }
                    }
                    countTimes++;
                }, 50);
            }; 
        }
};
img.src = yourSource;

Это работает для меня!!! на IE и FF.