项目中要求图片上传并裁剪的功能，之前也有接触过很多图片裁剪插件，效果体验不是很好，今天推荐一款好用的插件-cropper，超级好用，裁剪功能丰富，满足了各种需求。
功能：
1：点击选择图片，弹出文件夹选择桌面 文件
2：选择文件之后，打开编辑图片的页面，开始裁剪图片插件下载地址：
插件描述：croppic图像裁剪将满足您的需求，图像加载效果、展现效果以及裁剪都非常棒，相信看到Demo后一定会喜欢上此插件.
图片.png
图片.png
代码：
1：引入相关的css和js文件,cropper.min.css，ImgCropping.css，cropper.min.js等，文件下载地址：<link rel="stylesheet" href="css/cropper.min.css">
<link rel="stylesheet" href="css/ImgCropping.css"><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/cropper.min.js"></script>
2：具体代码如下：前端部分
基于cropper.js的图片裁剪 ![]()
3：后台Java代码：
利用cropper插件裁剪本地图片，接下来的问题就是将裁剪过后的base64图片上传至后台。1：去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看
2：解码3：在tomcat目录下创建picture文件夹保存图片4：判断文件目录是否存在5：根据系统的不同获取文件路径的分隔符6：输出文件路径
package com.debo.cropper; import java.io.FileOutputStream; import java.text.SimpleDateFormat; import java.util.Base64; import java.util.Base64.Decoder; import java.util.Date; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang.RandomStringUtils; 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; @Controller @RequestMapping("upload") public class Cropper { /** * 注释的代码可以忽略 * @throws */ @RequestMapping(method = RequestMethod.POST) @ResponseBody public String cropper(@RequestParam("file") String file, HttpServletRequest request) throws Exception { Decoder decoder = Base64.getDecoder(); // 去掉base64编码的头部 如："data:image/jpeg;base64," 如果不去，转换的图片不可以查看 file = file.substring(23); //解码 byte[] imgByte = decoder.decode(file); /*//在tomcat目录下创建picture文件夹保存图片 String path = request.getSession().getServletContext() .getRealPath(""); String contextPath = request.getContextPath(); path = path.replace(contextPath.substring(1), "") + "picture"; File dir = new File(path); if (!dir.exists()) {// 判断文件目录是否存在 dir.mkdirs(); } //因为windows和linux路径不同，window：D:\dir linux:opt/java //System.getProperty("file.separator")能根据系统的不同获取文件路径的分隔符 String fileName = getFileName(); path = path + System.getProperty("file.separator") + fileName; */ try { FileOutputStream out = new FileOutputStream("D:/1.jpg"); // 输出文件路径 out.write(imgByte); out.close(); } catch (Exception e) { e.printStackTrace(); } return "success"; /*String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/picture/" + fileName; return url; */ } /** * 创建文件名称 内容：时间戳+随机数 * * @param @return * @throws */ private String getFileName() { SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss"); String timeStr = sdf.format(new Date()); String str = RandomStringUtils.random(5, "abcdefghijklmnopqrstuvwxyz1234567890"); String name = timeStr + str + ".jpg"; return name; } } RandomStringUtils需要导入依赖
commons-lang commons-lang 2.6
原文作者：祈澈姑娘
技术博客：90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。文末福利：关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源200G干货大全。公众号回复“1”，拉你进程序员技术讨论群