使用jQuery / Java裁剪和上传图像

Question

我正在寻找一个允许以下内容的jQuery插件：

1. 选择/浏览图像（来自用户的文件系统）
2. 预览图像，具有CROP
功能
3. 将裁剪后的图像上传到服务器（JAVA Servlet）

对此有何指示？

P.S。 ：我发现了许多独立的图像裁剪插件（适用于预定义的图像），但也没有允许上传自定义图像的插件（通过Java servlet）。

Answer 1

一种方法是在实际将图像上传到HTML5支持的浏览器中的服务器之前裁剪图像，here进行了解释。提到的解决方案是：JCrop，JQuery，HTML5的File和Canvas API的组合。

另一种方法（非HTML5浏览器）是：

1. 选择/浏览图片
2. 将其上传到服务器（作为临时图像）
3. 预览图像，具有CROP
功能
4. 将CROP坐标发送到服务器
5. 在服务器端裁剪并保存图像

Answer 2

简而言之，您需要做以下事。

使用HTML“multipart”表单将图像发布到servlet

<form name="frm" enctype="multipart/form-data" action="/saveimage" method="POST">
  <input type="file" name="filetoupload" />    
  <input type="submit" value="Upload" />
</form>

在servlet中将此文件写入“public”文件夹，以便浏览器可以访问它。如果您使用Servlet，可以使用http://commons.apache.org/fileupload/来实现此目的。如果您使用的是Web应用程序框架，该框架可能会为您提供上载二进制数据的方法。

返回包含上传图片链接/参考的页面。您可能希望使用某种随机文件名生成算法来避免文件引用冲突。

<img src="/public/random-image.jpg"/>

使用JCrop http://deepliquid.com/content/Jcrop.html获取裁剪坐标。 JCrop文档对于如何使用它非常冗长。请注意，您需要初始化JCrop以与上面的图像引用绑定。

编写另一个servlet，你可以POST / GET裁剪坐标，并用它做你想做的任何事情。