使用jQuery fileupload裁剪图像

Question

我刚刚开始实现文件上传功能，并想知道添加裁剪功能的最佳方法是什么。

基本上，我想要的是让用户能够按照给定的宽高比裁剪他们的图像。我目前拥有的是使用jQuery fileupload插件的功能文件上传。当我选择一个文件时，它会自动通过ajax将文件上传到我的后端并做一些事情（保存图像，生成缩略图等）。我检查了一些关于前端裁剪功能的插件，发现jQuery imgareaselect符合我的要求。

所以我的问题是，我如何使裁剪逻辑符合我现在的要求？因此，当用户上传文件时，该文件会自动上传并保存在后端。因此，如果我选择裁剪图像，是否只发送坐标并重新记录已保存的图像？

一些逻辑流程和示例将非常有用。谢谢！

Answer 1

如果您不想发送两个请求。您可以创建img标记并通过JavaScript加载图像并打开图像进行裁剪。 Jcrop也是图像裁剪的好工具，它接受纵横比作为参数。返回选定的坐标。你可以一次性传递图像和坐标。