Image rotate on canvas

Question

We are using Ionic and Angular.

After clicking image, we need to rotate the image on canvas. If we pass jpg, it rotates as needed but when we pass base64, it doesn't rotate the image.

Below is our code:

home.html

<canvas id="c" ></canvas>

home.ts

ngOnInit() {
    let img = "//base64 string";
   
    setTimeout(() => {
        this.rotateBase64Image(img, 'callback');
    },1000);
}

rotateBase64Image(base64data, callback) {
    var canvas = document.getElementById("c");
    var ctx = (<any>canvas).getContext("2d");
   
    var image = new Image();
    image.src = base64data;
    image.onload = function() {
        var size = '200';
        canvas.setAttribute('width', image.width.toString());
        canvas.setAttribute('height', image.height.toString());

        ctx.rotate(90 * Math.PI / 180);
        ctx.drawImage(image, 0, -image.height);
        console.log(""+callback+"('"+(<any>canvas).toDataURL()+"')");
    };
}

callback(base64data) {
    console.log(base64data);
}

Here is a screenshot of canvas when base64 is passed:

Danil Prokhorenko · Answer 1 · 2021-07-21T03:45:27.100

Based on HTML5 Canvas Rotate Image I did this example:

<ion-content>
    <div>
        <canvas id="c" ></canvas>
    </div>

    <ion-button (click)="rotateImage()">
        Rotate image
    </ion-button>
</ion-content>

And logic:

base64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=';
angle = 0;
readonly rotationAngleStep = 90;

ngOnInit() {
    const img = this.base64;
    this.rotateBase64Image(img);
}

rotateImage() {
    this.angle += this.rotationAngleStep;
    this.rotateBase64Image(this.base64);
}

rotateBase64Image(base64data) {
    const canvas: any = document.getElementById('c');
    const ctx: CanvasRenderingContext2D = canvas.getContext('2d');

    const image = new Image();
    image.src = base64data;
    image.onload = () => {
        canvas.setAttribute('width', Math.max(image.width, image.height).toString());
        canvas.setAttribute('height', Math.max(image.width, image.height).toString());

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width/2, canvas.height/2);
        ctx.rotate(this.angle * Math.PI / 180);
        ctx.drawImage(image, -image.width / 2, -image.height / 2);
        ctx.restore();
    };
}

Image rotate on canvas

1 Answers1