Question

我正在制作一个应用程序，用户可以在其中上传图像，然后就可以操作图像，如缩放和裁剪内容。我想要做的是当用户上传图像时，如果高度大于图像，我只想将其旋转90度。我知道我可以通过使用css3或使用jquery来实现它。有没有办法实际旋转图像而不仅仅是演示文稿我的意思是在客户端更改图像本身。我不想将文件发送到服务器以使用图像魔术或其他一些库，因为通过添加到服务器的往返来增加加载时间。

并对此发表看法？

Answer 1

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

您必须使用drawImg()在画布中获取图像，根据需要进行转换，将画布转换为图像数据并上传。

// 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，就像this一样。

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

我希望这可以帮助你开始。

在客户端旋转图像

1 个答案: