Javascript 在加载图像、裁剪并将其绘制到画布上之后，如何允许用户在base64转换之前旋转图像？

我裁剪成正方形，在画布上画一个图像

    if(img.height >= img.width) {
        ctx.drawImage(img, 0, 0, 110, 110 * img.height / img.width);
    } else {
        ctx.drawImage(img, 0 , 0, 110 * img.width / img.height, 110);
    }

绘制完图像后，我使用

canvas.toDataURL（）转换为base64并发布到服务器

然而，在我转换和发布之前，我想让用户能够在转换为base64之前将图像旋转90度

我有一个测试设置
以下是如何在临时画布上旋转裁剪的图像：

然后您可以为您的帖子执行tempCanvas.toDataURL


创建临时屏幕外画布
调整临时画布的大小，以适合调整大小并旋转的图像
转换到临时画布的中间
旋转90度
在临时画布上绘制调整大小的图像

演示：


示例代码：

// create a temporary canvas

var tempCanvas=document.createElement('canvas');
var tempCtx=tempCanvas.getContext('2d');

// resize the tempCanvas

tempCanvas.width=h;
tempCanvas.height=w;

// translate+rotate and draw the resized image to tempCanvas

tempCtx.translate(h/2,w/2);
tempCtx.rotate(Math.PI/2);
tempCtx.drawImage(canvas, 0,0,w,h, -w/2,-h/2,w,h);

旋转是在绘制之前…从画布中拉出图像，旋转，重画，保存