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

Question

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

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

对此有什么建议吗？

附： ：我发现了许多独立的图像裁剪插件（适用于预定义的图像），但不是那些也允许上传自定义图像的插件（通过 Java servlet）。

Answer 1

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

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

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

Answer 2

简而言之，您需要执行以下操作。

使用 HTML“多部分”表单将图像发布到 servlet

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

在 servlet 中将此文件写入“公共”文件夹，以便浏览器可以访问它。如果您正在使用 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 裁剪后的坐标并对其进行任何操作。