NS_ERROR_NOT_AVAILABLE: Komponent nie jest dostępny

Question

Mam problem. Próbuję narysować obraz na płótnie. Obraz nie pochodzi ze strony HTML, ale z pliku. Oto kod, którego używam:

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

teraz, tutaj jest problem. Nie działa to na Firefox i IE10 (nie testowałem jeszcze w innych przeglądarkach). Na Firefox (21) pojawia się:

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

i na IE10 uzyskać:

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

plików i ich katalogi są:

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

Teraz, kiedy zmienić img.src do adresu URL (obraz z innej strony) wszystko działa poprawnie, obraz rysuje się po opóźnieniu (ponieważ pochodzi z adresu URL). Co ja robię źle?

Answer 1

Zgaduję, problem polega na tym, że obraz nie jest jeszcze załadowany przed próbą go użyć . Spróbuj tego:

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

Obiekt src jest ustawiony po wiążących zdarzenie, ponieważ buforowane obrazie o load zdarzeń pożary natychmiast (co jest częstym problemem w IE).

I w zależności od konstrukcji, ścieżka do obrazu będzie prawdopodobnie images/logo.jpg (usuwanie pierwszego /)

Answer 2

trzeba czekać na załadowanie obrazu przed przystąpieniem do rysowania go na płótnie:

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

Answer 3

problem, że Chyba tutaj jest, gdy zasoby są dostępne ?, ale istnieje sposób, aby potwierdź, że zasoby są dostępne, po prostu zaznacz "kompletny" atrybut obiektu obrazu.

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

Można również utworzyć metodę scalania z zdarzeniem onload i metodą opóźnienia, która sprawdza oba elementy.

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; 

To działa dla mnie! na IE i FF.