Jquery-rotation de travail si l'élément initial est une image, mais pas si toile

Question

http://chrishorsnell.co.uk/emblem/rotate.php

Je suis en train de faire une rotation de l'image. Le plugin jquery rotate (code.google.com/p/jquery-rotate/ # Désolé ne peut faire qu'un lien hypertexte) fonctionne bien, je l'ai eu pour travailler sur une image (voir l'exemple 2), mais j'essaie de mettre en œuvre dans quelque chose d'autre et l'image est déjà une toile (voir l'exemple 1).

Le plugin commence par une image, puis la transforme en toile et utilise celle-ci à partir du 2e tour. Quand j'essaye de l'exécuter sur le canevas que j'ai déjà créé, ça ne marchera pas.

également lors de la rotation du 1er exemple, Firebug jette cette

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://chrishorsnell.co.uk/emblem/jquery.rotate.1-1.js :: anonymous :: line 57" data: no] 

Ceci est la ligne 57 de jquery.rotate.1-1.js

context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); 

Je pense que le problème se situe entre la ligne 29-34 de jquery.rotate.1-1.js, mais ne peux pas comprendre comment trier

if (!p.oImage) { 
     canvas.oImage = new Image(); 
     canvas.oImage.src = p.src; 
    } else { 
     canvas.oImage = p.oImage; 
    } 

Toutes les suggestions?

Answer 1

Regardez la ligne 2 du jquery.rotate.1-1.js:

jQuery.fn.rotate = function(angle,whence,translate_w,translate_h) { 
    var p = this.get(0); 

Et si vous regardez dans Firebug, lorsque vous (essayer de) faire pivoter l'image, il envoie plusieurs requêtes à undefined.

Alors? Eh bien, vous semblez appeler rotate() en quelque sorte invalide, de sorte que sa fonction interne a this == $.

Et il appelle this.get(0), qu'il interprète donc comme $.get(0) et exécute un XHR à undefined.

Réglons partie: remplacer la ligne 2 avec:

var p = $(this).get(0); // don't do this. Instead: 

if (this === jQuery) { throw new Exception("Don't pass jQuery object here!"); } 
var p = this.get(0); 

De cette façon, vous ne pouvez pas appeler accidentellement $.get(): il échouera à cause de trop récursivité.

EDIT: J'étais stupide. Vérifiez que this != jQuery et lancez une erreur. Beaucoup mieux.

Maintenant, pour la raison qu'il échoue:

Le plugin rotate veut une image. Si ce n'est pas le cas, il essaie de faire des choses illégales et échoue. Par conséquent, donnez-lui une image. Ou, écrivez le code de rotation vous-même.