在将画布转换为js中的图像后旋转画布[重复]答案

【问题标题】：rotating a canvas after converting it to a image in js [duplicate]在将画布转换为js中的图像后旋转画布[重复]
【发布时间】：2017-07-11 04:41:23
【问题描述】：

我有一个canvas，我将它转换成这样的图像，

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

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

【问题讨论】：

对不起，我不认为这是重复的。我需要在 js 中而不是在 css 中完成此操作。因为我在旋转完成后将图像转移到新窗口。
第二个答案 (stackoverflow.com/a/29398757/1693593) 画布大小反映相对于旋转，可能是您想要的。
解决了谢谢:)

标签： javascript jquery html5-canvas

【解决方案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() 并将其拍到您的图像中。

【讨论】：