Question

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

I am trying to make an image rotate. The jquery rotate plugin ( code.google.com/p/jquery-rotate/ # sorry can only do 1 hyperlink ) plugin works fine, I have got it to work on an image (see example 2), but I am trying to implement it into something else and the image is already a canvas (see example 1).

The plugin starts with an image, then turns it into a canvas and uses that from the 2nd rotate onwards. When I try and get it to run on the canvas I have already created previously it wont work.

Also when rotating the 1st example, firebug throws out this

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]

This is line 57 of jquery.rotate.1-1.js

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

I think the problem lies between line 29-34 of jquery.rotate.1-1.js, but cant figure out how to sort it

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

Any suggestions?

Answer 1

Look at line 2 of jquery.rotate.1-1.js:

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

And if you look in firebug, when you (try to) rotate the image, it send multiple queries to undefined.

So? Well, you seem call rotate() somehow invalidly, so its inner function has this == $.

And it calls this.get(0), which it therefore interprets as $.get(0) and performs an XHR to undefined.

Let’s solve part of it: replace line 2 with:

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);

This way, you can’t accidentally call $.get(): it will fail because of too much recursion.

EDIT: I was being stupid. Check that this != jQuery, and throw an error. Much better.

Now for the reason it fails:

The rotate plugin wants an image. If it doesn’t have that, it tries to do illegal stuff, and fails. Therefore, give it an image. Or, write the rotate code yourself.