一、引入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; } }