项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求。
功能:
1:点击选择图片,弹出文件夹选择桌面 文件
2:选择文件之后,打开编辑图片的页面,开始裁剪图片插件下载地址:
插件描述:croppic图像裁剪将满足您的需求,图像加载效果、展现效果以及裁剪都非常棒,相信看到Demo后一定会喜欢上此插件.
代码:
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”,拉你进程序员技术讨论群