使用jQuery文件上传裁剪图像

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

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

所以我的问题是，我如何适应我现在拥有的裁剪逻辑？所以当用户上传文件时，文件会自动上传并保存在后端。因此，如果我选择裁剪图像，是否应该只发送坐标并复制已保存的图像？

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

来源

2013-12-24 maru

如果您要将完整图像发送到服务器，则无论您想将剪裁坐标发送到服务器，还是让服务器负责修剪它。但是，如果您不需要支持旧版浏览器，则可以在使用HTML5 File API将图像发送到服务器之前在浏览器中进行裁剪，从而节省带宽和存储空间。 – Thayne

@Thayne我打算支持旧版浏览器。你是否说我必须通过另一个请求发送裁剪坐标（与jquery fileupload无关），然后在后端裁剪图像？ – maru

可能还有其他方法可以做到这一点，例如，您可以让服务器将图像或URL发送回图像并对其进行处理，但是如果您想要支持IE9或更早版本，请在后端发送坐标并进行裁剪可能是最简单的解决方案。 – Thayne

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

来源

2015-01-03 18:45:29 Anuja

使用jQuery文件上传裁剪图像

回答

相关问题