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

Posted 2023-02-26

【中文标题】使用 jQuery/Java 裁剪和上传图像

【英文标题】：Crop and Upload image using jQuery/Java

【发布时间】：2012-02-28 17:12:46

【问题描述】：

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

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

对此有什么建议吗？

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

【参考方案1】：

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

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

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

【讨论】：

我不久前将 JCrop/JQuery 与 ASP.NET 一起用于一些裁剪/预览/上传功能。这是一次令人惊讶的愉快体验！

【参考方案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 裁剪后的坐标并对其进行任何操作。