将画布转换为js中的图像后旋转画布

Question

我有一个canvas我将其转换为这样的图像，

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.src = can.toDataURL();

我现在需要旋转此图片吗？有可能吗？

Answer 1

您需要创建一个新画布，旋转它的2dDrawingContext，将图像数据绘制到它，然后将其设置为源

var canvas = document.createElement('canvas');
var ctx2 = canvas.getContext('2d');
ctx2.rotate(Math.PI/2);
ctx2.putImageData(ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height), 0, 0);

然后，您可以在此处拨打ctx2.toDataURL()并将其拍到您的图片中。