一、引入js和css
二、实现
1、jsp页面
<%--
Created by IntelliJ IDEA.
User: a
Date: 2019/8/19
Time: 9:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="js/jquery.Jcrop.min.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/Jcrop_upload.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script> </head>
<body> <form id="upload_form" enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/user/upLoadImage.do" >
<!-- hidden crop params -->
<input type="hidden" id="x1" name="x1" />
<input type="hidden" id="y1" name="y1" />
<input type="hidden" id="x2" name="x2" />
<input type="hidden" id="y2" name="y2" /> <p>第一步:请选择图像文件</p>
<div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div> <div class="error"></div> <div class="step2">
<p>第二步:请选择需要截图的部位,然后按上传</p>
<img id="preview" >
<br> <input type="submit" value="上传" />
</div>
</form> </body>
</html>
2、工具类
package com.zy.utils; import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException; import javax.imageio.ImageIO; public class ImageCut { /**
* 图片切割
* @param imagePath 原图地址
* @param x 目标切片坐标 X轴起点
* @param y 目标切片坐标 Y轴起点
* @param w 目标切片 宽度
* @param h 目标切片 高度
*/
public static void cutImage(String imagePath, int x ,int y ,int w,int h){
try {
Image img;
ImageFilter cropFilter;
// 读取源图像
BufferedImage bi = ImageIO.read(new File(imagePath));
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度 //若原图大小大于切片大小,则进行切割
if (srcWidth >= w && srcHeight >= h) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT); //如果jsp页面上展示的是原图的大小,那么此处就不计算起始坐标和宽高了,直接裁剪
int x1 = x;
int y1 = y;
int w1 = w;
int h1 = h; cropFilter = new CropImageFilter(x1, y1, w1, h1);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", new File(imagePath));
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
3、controller
package com.zy.controller; import com.zy.utils.ImageCut;
import org.apache.commons.io.IOUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView; import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.util.UUID; @Controller
@RequestMapping("user")
public class ImageController { @RequestMapping("/upLoadImage")
public void upimage(Double x1,Double x2,Double y1,Double y2,HttpServletRequest request,MultipartFile image_file ){//包装类 Boolean isCut=false;//不裁剪
if (x2!=null&&x2!=0){//如果x2有值,说明横坐标终点发生变化,用户使用了裁剪
//截取的宽度
isCut=true;
} //图片上传
String path="/img";
String realPath = myGetRealPath(path, request);
String newFileName = newFileName(image_file); //上传----把本地文件按流的方式copy到服务器上 //输入流
InputStream is = null;
try {
is = image_file.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
//输出流
FileOutputStream os = null;
try {
os = new FileOutputStream(realPath+"/"+newFileName);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
//copy
try {
IOUtils.copy(is, os);
} catch (IOException e) {
e.printStackTrace();
} try {
os.close();
is.close();
} catch (IOException e) {
e.printStackTrace();
}
int i1=x1.intValue();
int i2=x2.intValue();
int i3=y1.intValue();
int i4=y2.intValue(); //3图片裁剪
if(isCut){
ImageCut.cutImage(realPath+"/"+newFileName,i1,i3,i2-i1,i4-i3);
} } //辅助方法
//1根据逻辑路径得到真实路径
//过期的
//@SuppressWarnings(“deprecation”)表示不检测过期的方法
@SuppressWarnings("deprecation")
public String myGetRealPath(String path, HttpServletRequest request){
String realPath = request.getRealPath(path);
System.out.println("真实路径:"+realPath);
File file = new File(realPath);
if(!file.exists()){
file.mkdirs();
} return realPath;
} //2更改文件名
public String newFileName(MultipartFile file){
String originalFilename = file.getOriginalFilename();
//abc.jpg
//截取后缀,拼接新的文件名
//后缀
String substring = originalFilename.substring(originalFilename.lastIndexOf("."));
//新文件名要求:上传中防止文件名重复,发生覆盖
String uu = UUID.randomUUID().toString(); String newName=uu+substring;
return newName; } }