Flip image in Canvas , without using Scale -1

157 Views Asked by At

I am trying to add flip and flop functionality to this demo http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html

I am trying by setting scalex = -1 , its works , but this demo also has resize functionality. So author finding height and width (on resizing the image) with scalex (please check below code).

After I am assigning scalex = -1 , the canvas height and width become 0. Is there any other was of doing this?

Canvas.Img.prototype.setFlop = function() {
    this.width = this._oElement.width;
    this.height = this._oElement.height;
    this.scalex = -1

    this.setImageCoords();
}

Canvas.Img.prototype.setImageCoords = function() {
    this.left = parseInt(this.left);
    this.top = parseInt(this.top);

    this.currentWidth = parseInt(this.width) * this.scalex;
    this.currentHeight = parseInt(this.height) * this.scalex;
    this._hypotenuse = Math.sqrt(Math.pow(this.currentWidth / 2, 2) + Math.pow(this.currentHeight / 2, 2));
    this._angle = Math.atan(this.currentHeight / this.currentWidth); ...
0

There are 0 best solutions below