Javascript 在画布上旋转图像

在我的web应用程序中，我允许用户选择图像。如果图像的高度大于宽度，则我将图像旋转270度

我对旋转图像的理想大小感到困惑，因为我以后会保存旋转图像

例如，如果用户上传的图像分辨率较低，那么图像的大小应该是多少？如果用户上传的图像分辨率较高，那么图像的大小应该是多少

---

我不希望像素被扭曲。有没有好的库可以在客户端旋转图像？或者任何可以帮助我的算法？

您可以使用

Blob

对象方法。将图像转换为blob对象，您就可以使用它了。我无法帮助编写代码，因为我不太了解BLOB。请对BLOB进行更多研究，您可以使用BLOB实现您想要做的事情。

您可以尝试以下简单的画布方法：

基本上，您将在画布上绘制图像，旋转，然后将画布保存到dataUrl

var context = canvas.getContext('2d');
//save the context
//pushes a Matrix on the transformation stack
context.save();
context.translate(x, y); //where to put image (in the canvas)
context.rotate(angle); //angle in degrees (i think...)
context.scale(scale); //optional scale
//rotate around center of image
context.drawImage(bitmap, -image.width / 2, -image.height / 2);
//or rotate around top left corner of image
context.drawImage(image, 0, 0);
//restore the canvas
//pop a matrix off the transformation stack
context.restore();
//now save the canvas to a data url for download or to display in an image object / tag
var data = canvas.toDataUrl();

参考资料：