NS_ERROR_NOT_AVAILABLE: le Composant n'est pas disponible

J'ai un problème. Je suis en train d'essayer de dessiner une image sur une toile. L'image n'est pas à partir de la page HTML, mais sur 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 obtenir: 

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

et sur IE10-je obtenir: 

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, quand je change l'img.src-URL (une image à partir d'un autre site) tout fonctionne bien, l'image se dessine après un délai(pour les obtenir à partir de l'url). Ce que je fais mal?

InformationsquelleAutor Mario Stoilov | 2013-06-11
  1. 27

    Je vais deviner le problème est que l'image n'est pas encore chargé, avant de tenter de l'utiliser. Essayez ceci:

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

    La src propriété est définie après de liaison de l'événement en raison d'une mise en cache de l'image load événement se déclenche immédiatement (ce qui est un problème commun dans IE).

    Et en fonction de votre structure, le chemin vers l'image serait probablement images/logo.jpg (la suppression de la première /)

    • Cela signifie qu'il n'est pas de trouver l'image. Donc, ce n'est pas réellement résoudre le problème, il vient de se configure pour fonctionner correctement. Essayez d'utiliser img.src = "images/logo.jpg"; - notez l' / j'ai laissé de côté au début de la chaîne
    • Ouais, j'ai un peu remarqué, mais a supprimé mon commentaire avant de vous a répondu :/. Merci quand même
    • Bonjour, j'ai le même problème avec le code, mais l'erreur ne vient que dans le navigateur firefox. Où, comme il travaille dans l'autre tous les navigateurs. Est-il un cas particulier pour firefox. J'ai essayé ce code mais n'a toujours pas obtenu aucun résultat. Si possible merci de m'aider.
    InformationsquelleAutor Ian
  2. 4

    Vous avez besoin d'attendre pour l'image à charger avant de tenter de le mettre 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
}
    InformationsquelleAutor meagar
  3. 0

    Le problème qui, je pense, ici, c'est quand les ressources seront-elles disponibles?, mais il y a un moyen de confirmer que les ressources sont disponibles, il suffit de cocher "complète" de l'attribut de l'objet image.

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

    Aussi, vous pouvez faire une méthode de fusion avec l'événement onload et un retard de la méthode que de vérifier à la fois des choses.

    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;

    Ce travail est pour moi!!! sur IE et FF.

    InformationsquelleAutor sendler