NS_ERROR_NOT_AVAILABLE: il componente non è disponibile

Question

Ho un problema. Sto cercando di disegnare un'immagine su una tela. L'immagine non proviene dalla pagina HTML, ma da un file. Ecco il codice che uso:

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

ora, ecco il problema. Questo non sembra funzionare su Firefox e IE10 (non ho ancora testato su altri browser). Su Firefox (21) ottengo:

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

e IE10 ottengo:

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

I file e le loro directory sono:

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

Ora quando cambio l'img.src a un URL (un'immagine da un altro sito) tutto funziona bene, l'immagine si disegna dopo un ritardo (perché viene dall'URL). Che cosa sto facendo di sbagliato?

Answer 1

Sto indovinando il problema è che l'immagine non è ancora stato caricato prima di tentare di usarlo . Prova questo:

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

La proprietà src è impostata dopo vincolante l'evento a causa di un'immagine memorizzata nella cache load generato l'evento immediatamente (che è un problema comune in IE).

E secondo la vostra struttura, il percorso dell'immagine sarebbe probabilmente images/logo.jpg (togliendo il primo /)

Answer 2

è necessario attendere per l'immagine da caricare prima di tentare di disegnare in tela:

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

Answer 3

Il problema che immagino qui, è quando le risorse siano disponibili ?, ma c'è un modo per conferma che le risorse sono disponibili, basta controllare l'attributo 'complete' dell'oggetto immagine.

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

Inoltre, è possibile eseguire un metodo di unione con evento onload e un metodo di ritardo che controlla entrambe le cose.

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; 

Questo funziona per me !!! su IE e FF.