javascript - CamanJS revert and rotate fix -

if use rotation plugin in camanjs there issue when trying revert changes. caman implemented in way working when crop or resize image, not when rotate it. when revert , image rotated image reloads distorted, because doesn't take under consideration canvas has rotated , changed size. imagedata.data of canvas different now. think fixxed looking how implemented resize. basicaly did (and too) is:

1. create canvas in initial state
2. update pixeldata initialstate
3. create new canvas
4. rotate him initial image
5. get imagedata , rerender them

so added. needed know how many angles image rotated can correct imagedata when rotate new canvas (step 4).

this.angle=0; //added in constructor 

i added new boolean in constructor tell me if canvas rotated

this.rotated = false; 

in rotated plugin:

caman.plugin.register("rotate", function(degrees) {     //....     //....     //....     this.angle += degrees;     this.rotated = true;     return this.replacecanvas(canvas); } 

and on originalvisiblepixels prototype:

else if (this.rotated){     canvas = document.createelement('canvas');//canvas initial state     canvas.width = this.originalwidth; //give 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 pixeldata (length equal of initial canvas           _ref = this.originalpixeldata; //use reference array     (i = _i = 0, _len = _ref.length; _i < _len; = ++_i) {         pixel = _ref[i];         pixeldata[i] = pixel; //give pixeldata initial pixels     }     ctx.putimagedata(imagedata, 0, 0); //put on our canvas     rotatedcanvas = document.createelement('canvas'); //canvas rotate initial     rotatedctx = rotatedcanvas.getcontext('2d');     rotatedcanvas.width = this.canvas.width;//our canvas rotated has been replaced. caman's canvas attribute allready rotated, use 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 total angle     rotatedctx.drawimage(canvas, -canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); //put image on canvas     rotatedctx.restore(); //restore     pixeldata = rotatedctx.getimagedata(0, 0, rotatedcanvas.width, rotatedcanvas.height).data; //get pixeldata            width = rotatedcanvas.width; //used returning pixels in revert function                } 

you need add resets in reset prototype function. basicaly reset angle , rotated

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

and that's it.

i used , works far. think?hope helps

thanks this, worked after 1 slight change.

in else if statement inside originalvisiblepixels prototype changed:

x = rotatedcanvas.width / 2; //for translating y = rotatedcanvas.width / 2; //same 

to:

x = rotatedcanvas.width / 2; //for translating y = rotatedcanvas.height/ 2; //same 

before change images being cut.