图像在画布上旋转答案

【问题标题】：Image rotate on canvas图像在画布上旋转
【发布时间】：2021-09-27 18:52:36
【问题描述】：

我们正在使用 Ionic 和 Angular。

点击图片后，我们需要在画布上旋转图片。如果我们传递 jpg，它会根据需要旋转，但是当我们传递 base64 时，它不会旋转图像。

下面是我们的代码：

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

这是通过base64时的canvas截图：

【问题讨论】：

标签： javascript angular typescript ionic-framework

【解决方案1】：

基于HTML5 Canvas Rotate Image我做了这个例子：

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

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

还有逻辑：

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

【讨论】：