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

Question

我裁剪成正方形并将图像绘制到 Canvas

    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 并 POST 到服务器。

但是在我转换和 POST 之前，我希望允许用户在将图像转换为 base64 之前将其旋转 90 度。

我有一个测试设置 HERE

Answer 1

以下是在临时 Canvas 上旋转裁剪图像的方法:

然后你可以为你的 POST 做 tempCanvas.toDataURL。

• 创建一个临时的屏幕外 Canvas
• 调整临时 Canvas 的大小以适应调整大小+旋转的图像
• 翻译到临时 Canvas 的中间
• 旋转90度
• 在临时 Canvas 上绘制调整大小的图像

演示:http://jsfiddle.net/m1erickson/VrV38/

示例代码:

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