jquery.Jcrop结合JAVA后台实现图片裁剪上传实例资源-CSDN文库

27 浏览量 2020-10-21 04:41:53 上传评论收藏 86KB PDF 举报

jquery.Jcrop是一个基于jQuery的图片裁剪插件，它能够提供一个简洁、灵活的方式来让用户选择图片的某个区域进行裁剪。在互联网上，图片的上传和处理是一个非常常见的功能，特别是在社交媒体、电子商务网站以及在线图像编辑器等平台上。在图片上传后，用户可能需要对图片进行进一步的编辑，其中图片裁剪是一种常用的需求。而结合JAVA后台，我们可以实现一个完整的图片裁剪、上传和存储的过程。在开发过程中，首先需要在前端页面设计一个上传和裁剪的界面。这通常涉及到编写HTML表单和使用CSS样式对上传的图片进行显示。在本例中，使用了jQuery、springmvc框架和jcrop插件。jQuery是一个快速且小巧的JavaScript库，它通过减少代码量以及简化HTML文档遍历和事件处理、动画和Ajax交互等操作来简化JavaScript编程。springmvc是Spring框架的一部分，是一个用于构建Web应用程序的模型-视图-控制器(MVC)框架。 jcrop插件提供了如下功能： 1. 允许用户通过鼠标拖拽和缩放来选择图片的一个区域。 2. 提供实时预览，当用户拖动裁剪区域时，可以即时看到裁剪后的效果。 3. 能够在裁剪后把裁剪区域的坐标信息传递给后台。具体实现步骤通常如下： 1. 用户选择图片。这个过程需要通过一个HTML的文件上传控件来实现，用户可以浏览本地的图片文件并选择。 2. 将选择的图片上传到服务器。在文件上传时，通常需要处理文件的编码以及设置表单的enctype为multipart/form-data。这一步在用户点击上传按钮后发生，上传动作通过一个带有POST方法的表单来完成。 3. 在服务器端，需要接收上传的图片并进行处理。对于图片的处理，常常需要先对图片进行压缩，确保其大小适合网页显示，同时也降低服务器存储和处理图片的压力。在Java中，可以使用Apache Commons Imaging或ImageIO等库来处理图片压缩。 4. 接下来是图片的裁剪。服务器端需要根据从前端传来的裁剪区域坐标信息来执行图片的裁剪操作，并将裁剪后的图片保存。 5. 将图片的存储路径信息或者其他相关信息返回到前端页面，以便在页面上展示裁剪后的图片。上述过程实现起来可能会遇到一些挑战。例如，图片上传时可能需要处理不同的图片格式和文件大小限制；在图片裁剪过程中，需要保证裁剪区域坐标的有效性以及裁剪后的图片的正确显示；在处理图片上传和裁剪请求时，还需要保证服务的安全性，避免恶意用户通过上传不当文件或执行攻击脚本等行为。前端页面代码中包含了一些关键的HTML元素和JavaScript代码。页面需要引入必要的库文件，如jquery.min.js、jquery.Jcrop.js和jquery-form.js。然后通过一个表单来提交图片，并使用一个id为"target"的div来显示上传后的图片。此外，还定义了一个"preview-pane"类，用于实时预览裁剪后的图片效果。当用户点击"确定"按钮时，会调用一个名为"photoSummit"的函数，该函数可能是用来收集裁剪参数并发送到服务器的。在文章中提到的前台页面代码片段中，还需要注意到的一些细节是样式定义，如"preview-container"和"targetDiv"的样式定义了预览区域的大小和背景色；一个表单id为"fileUp"，用来接收上传的图片文件，并定义了四个隐藏的输入框，这些输入框分别用来接收裁剪区域的宽、高、x坐标和y坐标，这些参数将在用户确定裁剪后传递到服务器。整体而言，jquery.Jcrop结合JAVA后台实现图片裁剪上传实例涉及到前端页面设计、图片的上传处理、图片的裁剪以及服务器端的逻辑处理等环节，通过多个技术的结合，可以为用户提供一种便捷和直观的图片处理方式。

资源推荐

资源详情

资源评论

jquery.Jcrop结合结合JAVA后台实现图片裁剪上传实例后台实现图片裁剪上传实例

主要介绍了jquery.Jcrop结合JAVA后台实现图片裁剪上传实例，具有一定的参考价值，感兴趣的小伙伴们可以

参考一下。

本文介绍了头像裁剪上传功能，用到的技术有 jQuery，springmvc，裁剪插件用的是jcrop（中间遇到很多坑，最终跨越）。

图片上传步骤：

1.用户选择图片

2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户

选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好

3.利用jcrop裁剪工具对图片进行裁剪并且实时预览

4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式

5.最后将图片路径传到前台进行展示

前台页面代码为：

/* 控制预览区域大小*/

#preview-pane .preview-container {

width: 110px;

height: 110px;

overflow: hidden;

}

#targetDiv{

width: 400px;

height: 400px;

background-color:#f7fdff;

}

</style>

</dt>

</div>

</dd>

</dl>

</a>

</form>

</dt>

请从本地选择一张照片，支持jpg,png格式 <span id="msg"></span>

</div>

</dd>

</dl>

</dd>

</dd>

</dl>

1.选择图片

2.提交：首先大家知道文件上传的时候用到的标签为：<input type="file"/> 但是有时候我们需要用ajax提交文件并且异步提

交，我们如果是用form表单提交的话就不是异步，这样我们回到页面就刷新页面，非常的不方便，但是现在ajax还不能支持文

件提交的方式，这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件，代码为：

$("#fileUp").<span style="color:#ff0000;">ajaxSubmit</span>({

type: "POST",

url:"/file/img/upload",

dataType: "json",

contentType:"application/json",

success: function(parameter){

$("#target2").attr('src','/upload/'+parameter.fileName);

$("#filePathInput").val('/upload/'+parameter.fileName);

if($("#format").text()=="重新上传"){

jcrop_api.destroy()

}

$("#format").text("重新上传");

//启动jcrop支持

openJcrop('/upload/'+parameter.fileName);

error : function(data) {

alert("ajax传输发生错误！！！");

}

});

这样就能将文件用ajax的方式提交到后台，注意这里用的是ajaxSubmit，这个方法对应jquery-form.js，后台代码为：

package com.quanshi.ums.gate.view.rest.controllers;

import java.io.IOException;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import com.quanshi.ums.gate.persistence.entities.Parameters;

import com.quanshi.ums.gate.view.rest.ImgEditor;

/**

* 图像上传和修改相关类

* @author kunpeng.zhao

@Controller

@RequestMapping(value="/file")

public class FileEditorController {

<span style="white-space:pre"> </span>ImgEditor imgEditor = new ImgEditor();

<span style="white-space:pre"> </span>public String filePathFinal = "";

<span style="white-space:pre"> </span>private Logger logger = LoggerFactory.getLogger(FileEditorController.class);

<span style="white-space:pre"> </span>@RequestMapping(value="/img/cutandscale",method=RequestMethod.POST)

<span style="white-space:pre"> </span>public @ResponseBody int cutAndscaleimg(

<span style="white-space:pre"> </span>@RequestParam("w") int w,

<span style="white-space:pre"> </span>@RequestParam("h") int h,

<span style="white-space:pre"> </span>@RequestParam("x") int x,

<span style="white-space:pre"> </span>@RequestParam("y") int y

<span style="white-space:pre"> </span>){

<span style="white-space:pre"> </span>imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h);

<span style="white-space:pre"> </span>imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false);

<span style="white-space:pre"> </span>return 1;

<span style="white-space:pre"> </span>}

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38500117

粉丝: 5
资源: 998

jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

jQuery Jcrop图像裁剪的插件结合java后台实现图片裁剪的功能

Jcrop实现图片上传裁剪功能,包含前后端代码,可直接发布运行

jquery-Jcrop实现图片裁剪截图上传和保存

java+jq+jcrop缩放裁剪上传图片

jquery+Jcrop+servlet图片上传裁剪选择保存实例

jquery crop+java 裁剪上传图片

移动端图片上传和裁剪-Jcrop实现

Jquery+php+jquery.cropzoom.js图片缩放裁剪上传实例

好用的JS图片裁剪工具——jquery.Jcrop-0.9.8

jquery.Jcrop.js（setImage方法支持自定义图片尺寸）

jQuery Jcrop 实现图像裁剪实例

struts2+jsp+jquery+Jcrop实现图片裁剪并上传

好用的JS图片裁剪工具——jquery.Jcrop-0.9.8 (官方修正版)

Jcrop插件对图片进行裁剪示例

jQuery图片裁剪插件Jcrop.js.zip

jQuery.Jcrop.min.js+PHP进行图片裁剪

jQuery图片裁剪插件Jcrop.js

利用imgareaselect辅助后台实现图片上传裁剪

jquery.Jcrop

jquery.Jcrop.js

jquery.jcrop.min.js

java+Jcrop实现上传即时显示图片并裁剪

tomcat 8.5.100

基于spring boot的小区物业管理系统源码+论文+答辩ppt

最新Java JDK 8安装版（Windows 64位）

RocketMQ 可视化工具 Dashboard下载

最新资源