it-swarm.com.de

NS_ERROR_NOT_AVAILABLE: Komponente ist nicht verfügbar

Ich habe ein Problem. Ich versuche, ein Bild auf eine Leinwand zu zeichnen. Das Bild stammt nicht aus der HTML-Seite, sondern aus einer Datei. Hier ist der Code, den ich verwende:

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

jetzt ist hier das Problem. Dies scheint nicht mit Firefox und IE10 zu funktionieren (ich habe es noch nicht mit anderen Browsern getestet). Auf Firefox (21) bekomme ich: 

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

und auf IE10 bekomme ich: 

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

Die Dateien und ihre Verzeichnisse sind: 

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

Wenn ich nun die img.src in eine URL (ein Bild von einer anderen Site) umwandle, funktioniert alles einwandfrei, das Bild zeichnet sich nach einer Verzögerung (da es von der URL stammt). Was mache ich falsch?

21
Mario Stoilov

Ich schätze, das Problem ist, dass das Bild noch nicht geladen ist, bevor Sie versuchen, es zu verwenden. Versuche dies:

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

Die src -Eigenschaft ist set after binding des Ereignisses, da das load -Ereignis eines zwischengespeicherten Bildes sofort ausgelöst wird (was in IE häufig vorkommt).

Entsprechend Ihrer Struktur würde der Pfad zum Bild wahrscheinlich images/logo.jpg sein (Entfernen des ersten /).

25
Ian

Sie müssen warten, bis das Bild geladen ist, bevor Sie versuchen, es in eine Leinwand zu zeichnen:

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

Das Problem, das ich hier vermute, ist, wann die Ressourcen verfügbar sind?, Aber es gibt eine Möglichkeit, zu bestätigen, dass die Ressourcen verfügbar sind.

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

Sie können auch eine Zusammenführungsmethode mit einem Onload-Ereignis und einer Verzögerungsmethode erstellen, die beide Elemente überprüft.

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;

Das funktioniert für mich !!! auf IE und FF.

0
sendler