web-dev-qa-db-fra.com

NS_ERROR_NOT_AVAILABLE: le composant n'est pas disponible

J'ai un problème. J'essaie de dessiner une image sur une toile. L'image ne provient pas de la page HTML, mais d'un fichier. Voici le code que j'utilise:

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

maintenant, voici le problème. Cela ne semble pas fonctionner sur Firefox et IE10 (je n'ai pas encore testé sur d'autres navigateurs). Sur Firefox (21) je reçois: 

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

et sur IE10 je reçois: 

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

Les fichiers et leurs répertoires sont: 

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

Maintenant, lorsque je remplace img.src par une URL (une image d'un autre site), tout fonctionne correctement, l'image se dessine elle-même après un délai (car elle se trouve dans l'URL). Qu'est-ce que je fais mal?

javascriptcanvas
21
Mario Stoilov

Je suppose que le problème est que l'image n'est pas encore chargée avant que vous n'essayiez de l'utiliser. Essaye ça:

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

La propriété src est définie after qui lie l'événement car l'événement load d'une image mise en cache se déclenche immédiatement (ce qui est un problème courant dans IE).

Et selon votre structure, le chemin d'accès à l'image serait probablement images/logo.jpg (en supprimant le premier /)

25
Ian

Vous devez attendre que l'image se charge avant d'essayer de la dessiner dans une toile:

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

Le problème que je suppose ici, c'est quand les ressources seront disponibles?, Mais il existe un moyen de confirmer que les ressources sont disponibles, il suffit de vérifier l'attribut 'complete' de l'objet image.

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

En outre, vous pouvez créer une méthode de fusion avec un événement onload et une méthode de retard vérifiant les deux éléments.

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;

Cela fonctionne pour moi!!! sur IE et FF.

0
sendler