Image processing 在客户端旋转图像

我正在制作一个应用程序，用户可以上传一张图片，然后可以像缩放和裁剪一样操作图片。我想做的是，当用户上传图像时，如果高度大于图像，我只想将其旋转90度。我知道我可以通过使用css3或jquery来实现它。是否有一种方法可以真正旋转图像而不仅仅是演示文稿？我的意思是在客户端更改图像本身。我不想将文件发送到服务器以使用image magic或其他库，因为这样会通过向服务器添加往返来增加加载时间

---

对此有何看法?

要在客户端转换图像，您必须使用HTML5，但只有相对较新的浏览器才支持它

您必须使用获取画布内的图像，根据需要进行转换，将画布转换为图像数据并上载

// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Rotate, zoom and crop the image inside the canvas...

// Get the data-URL formatted image.
// This is what you upload to the server and parse as image.
var dataURL = canvas.toDataURL("image/png");

// Upload the image
$.ajax({
  type: "POST",
  url: "/save_image",
  data: { 
   img: dataURL
  }
}

然后在服务器上解码图像并保存，就像使用PHP一样

您可以使用从用户处获取裁剪/缩放/旋转图像所需的数据，无论是在浏览器上还是在服务器上（）

我希望这有助于你行动起来