camanjs and rotate plugin not working properly

Question

Has anyone made rotate plugin work nice with camanjs? I have compiled camanjs using cofee and included the extra plugins. One of them is rotate. The rotate plugin is the following

Caman.Plugin.register("rotate", function(degrees) {
    var angle, canvas, ctx, height, to_radians, width, x, y;
    angle = degrees % 360;
    if (angle === 0) {
      return this.dimensions = {
        width: this.canvas.width,
        height: this.canvas.height
      };
    }
    to_radians = Math.PI / 180;
    if (typeof exports !== "undefined" && exports !== null) {
      canvas = new Canvas();
    } else {
      canvas = document.createElement('canvas');
      Util.copyAttributes(this.canvas, canvas);
    }
    if (angle === 90 || angle === -270 || angle === 270 || angle === -90) {
      width = this.canvas.height;
      height = this.canvas.width;
      x = width / 2;
      y = height / 2;
    } else if (angle === 180) {
      width = this.canvas.width;
      height = this.canvas.height;
      x = width / 2;
      y = height / 2;
    } else {
      width = Math.sqrt(Math.pow(this.originalWidth, 2) + Math.pow(this.originalHeight, 2));
      height = width;
      x = this.canvas.height / 2;
      y = this.canvas.width / 2;
    }
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext('2d');
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(angle * to_radians);
    ctx.drawImage(this.canvas, -this.canvas.width / 2, -this.canvas.height / 2, this.canvas.width, this.canvas.height);
    ctx.restore();
    return this.replaceCanvas(canvas);
});

plus

Caman.Filter.register("rotate", function() {
    return this.processPlugin("rotate", Array.prototype.slice.call(arguments, 0));
});

html

<img id="myimage" src="image.src">

javascript

caman = Caman("#myimage");
caman.rotate(45);
caman.render();

But when rotating with degrees other than 90, 270 -90 or 180 -180 the result is not wanted because image gets "eaten" on the edges

Funny thing is that when hitting revert (lets say i want to change the brightness of the rotated image more than one times) then the original image appears on the canvas but distorted

And a third problems is that if you rotate the image 90 degrees everything works great the image rotates and stays where it was (on the left). But if you do 45 degrees rotation the canvas does not re-adjust as size and the image stays in the middle. Can this be fixxed? Has anyone make it work correctly? Would you suggest another library maybe? I need the rotation functionality.

Answer 1

Caman.Plugin.register("rotate", function(degrees) {
    // add this 3 lint at last into the function.

    this.angle += degrees;
    this.rotated = true;
    return this.replaceCanvas(canvas);

}

Caman.prototype.originalVisiblePixels = function () {
        var canvas, coord, ctx, endX, endY, i, imageData, pixel, pixelData, pixels, scaledCanvas, startX, startY, width, _i, _j, _len, _ref, _ref1, _ref2, _ref3;
        if (!Caman.allowRevert) {
            throw "Revert disabled";
        }
        pixels = [];
        startX = this.cropCoordinates.x;
        endX = startX + this.width;
        startY = this.cropCoordinates.y;
        endY = startY + this.height;
        if (this.resized) {
            canvas = document.createElement('canvas');
            canvas.width = this.originalWidth;
            canvas.height = this.originalHeight;
            ctx = canvas.getContext('2d');
            imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            pixelData = imageData.data;
            _ref = this.originalPixelData;
            for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
                pixel = _ref[i];
                pixelData[i] = pixel;
            }
            ctx.putImageData(imageData, 0, 0);
            scaledCanvas = document.createElement('canvas');
            scaledCanvas.width = this.width;
            scaledCanvas.height = this.height;
            ctx = scaledCanvas.getContext('2d');
            ctx.drawImage(canvas, 0, 0, this.originalWidth, this.originalHeight, 0, 0, this.width, this.height);
            pixelData = ctx.getImageData(0, 0, this.width, this.height).data;
            width = this.width;
        }
        else if (this.rotated) {
            canvas = document.createElement('canvas');//Canvas for initial state
            canvas.width = this.originalWidth; //give it the original width
            canvas.height = this.originalHeight; //and original height
            ctx = canvas.getContext('2d');
            imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            pixelData = imageData.data;//get the pixelData (length equal to those of initial canvas      
            _ref = this.originalPixelData; //use it as a reference array
            for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
                pixel = _ref[i];
                pixelData[i] = pixel; //give pixelData the initial pixels
            }
            ctx.putImageData(imageData, 0, 0); //put it back on our canvas
            rotatedCanvas = document.createElement('canvas'); //canvas to rotate from initial
            rotatedCtx = rotatedCanvas.getContext('2d');
            rotatedCanvas.width = this.canvas.width;//Our canvas was already rotated so it has been replaced. Caman's canvas attribute is allready rotated, So use that width
            rotatedCanvas.height = this.canvas.height; //the same
            x = rotatedCanvas.width / 2; //for translating
            y = rotatedCanvas.width / 2; //same
            rotatedCtx.save();
            rotatedCtx.translate(x, y);
            rotatedCtx.rotate(this.angle * Math.PI / 180); //rotation based on the total angle
            rotatedCtx.drawImage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //put the image back on canvas
            rotatedCtx.restore(); //restore it
            pixelData = rotatedCtx.getImageData(0, 0, rotatedCanvas.width, rotatedCanvas.height).data; //get the pixelData back       
            width = rotatedCanvas.width; //used for returning the pixels in revert function               
        } else {
            pixelData = this.originalPixelData;
            width = this.originalWidth;
        }
        for (i = _j = 0, _ref1 = pixelData.length; _j < _ref1; i = _j += 4) {
            coord = Pixel.locationToCoordinates(i, width);
            if (((startX <= (_ref2 = coord.x) && _ref2 < endX)) && ((startY <= (_ref3 = coord.y) && _ref3 < endY))) {
                pixels.push(pixelData[i], pixelData[i + 1], pixelData[i + 2], pixelData[i + 3]);
            }
        }
        return pixels;
    };

Caman.prototype.reset = function() {
    //....
    this.angle = 0;
    this.rotated = false;
}