头像上传裁剪预览功能-java
来源:互联网 发布:怎么注册淘宝客 编辑:程序博客网 时间:2024/05/21 10:29
1.实现说明
原文是开源中国上的一个demo,文章最后给出原文链接,上面有源码。实现框架是:maven+springmvc+jcrop。需要的主要js和css文件为jquery.Jcrop.css,jquery.min.js,jquery.Jcrop.js。
2.一言不合上代码
2.1 controller层
import java.io.File;import javax.servlet.http.HttpServletRequest;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.multipart.MultipartFile;@Controller @RequestMapping("/UploadDemo")public class UploadImgController { @RequestMapping(value = "/uploadHeadImage",method = RequestMethod.POST) public String uploadHeadImage( HttpServletRequest request, @RequestParam(value = "x") String x, @RequestParam(value = "y") String y, @RequestParam(value = "h") String h, @RequestParam(value = "w") String w, @RequestParam(value = "imgFile") MultipartFile imageFile ) throws Exception{ System.out.println("==========Start============="); String realPath = request.getSession().getServletContext().getRealPath("/"); String resourcePath = "resources/uploadImages/"; if(imageFile!=null){ if(FileUploadUtil.allowUpload(imageFile.getContentType())){ String fileName = FileUploadUtil.rename(imageFile.getOriginalFilename()); int end = fileName.lastIndexOf("."); String saveName = fileName.substring(0,end); File dir = new File(realPath + resourcePath); if(!dir.exists()){ dir.mkdirs(); } File file = new File(dir,saveName+"_src.jpg"); imageFile.transferTo(file); String srcImagePath = realPath + resourcePath + saveName; int imageX = Integer.parseInt(x); int imageY = Integer.parseInt(y); int imageH = Integer.parseInt(h); int imageW = Integer.parseInt(w); //这里开始截取操作 System.out.println("==========imageCutStart============="); ImgCut.imgCut(srcImagePath,imageX,imageY,imageW,imageH); System.out.println("==========imageCutEnd============="); request.getSession().setAttribute("imgSrc",resourcePath + saveName+"_src.jpg");//成功之后显示用 request.getSession().setAttribute("imgCut",resourcePath + saveName+"_cut.jpg");//成功之后显示用 } } return "success"; }}
2.2 两个工具类
文件上传工具类:
import java.util.Arrays;import java.util.Date;import java.util.List;import java.util.Random;public class FileUploadUtil { public static final List<String> ALLOW_TYPES = Arrays.asList( "image/jpg","image/jpeg","image/png","image/gif" ); //文件重命名 public static String rename(String fileName){ int i = fileName.lastIndexOf("."); String str = fileName.substring(i); return new Date().getTime()+""+ new Random().nextInt(99999999) +str; } //校验文件类型是否是被允许的 public static boolean allowUpload(String postfix){ return ALLOW_TYPES.contains(postfix); }}
图片裁剪工具类:
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 javax.imageio.ImageIO;
public class ImgCut {
/**
* 截取图片
* @param srcImageFile 原图片地址
* @param x 截取时的x坐标
* @param y 截取时的y坐标
* @param desWidth 截取的宽度
* @param desHeight 截取的高度
*/
public static void imgCut(String srcImageFile, int x, int y, int desWidth,
int desHeight) {
try {
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(new File(srcImageFile+”_src.jpg”));
int srcWidth = bi.getWidth();
int srcHeight = bi.getHeight();
if (srcWidth >= desWidth && srcHeight >= desHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(desWidth, desHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
//输出文件
ImageIO.write(tag, “JPEG”, new File(srcImageFile+”_cut.jpg”));
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
2.3 Jsp页面
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>demo</title><link rel="stylesheet" href="<c:url value="/resources/jcrop/css/jquery.Jcrop.css"/>" type="text/css"></link><script type="text/javascript" src="<c:url value="/resources/jcrop/js/jquery.min.js"/>"></script><script type="text/javascript" src="<c:url value="/resources/jcrop/js/jquery.Jcrop.js"/>"></script></head><body> <form name="form" action="<%=request.getContextPath()%>/UploadDemo/uploadHeadImage" class="form-horizontal" method="post" enctype="multipart/form-data"> <div class="modal-body text-center"> <div class="zxx_main_con"> <div class="zxx_test_list"> <input class="photo-file" type="file" name="imgFile" id="fcupload" onchange="readURL(this);" /> <img alt="" src="" id="cutimg" /> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> </div> </div> </div> <div id="preview-pane"> <div class="preview-container"> <img src="" class="jcrop-preview" alt="预览"> </div> </div> <div class="modal-footer"> <button id="submit" onclick="">上传</button> </div> </form> <script type="text/javascript"> //定义一个全局api,这样操作起来比较灵活 var api = null, boundx, boundy, $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height(); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.readAsDataURL(input.files[0]); reader.onload = function(e) { $('#cutimg').removeAttr('src'); $('#cutimg').attr('src', e.target.result); $pimg.removeAttr('src'); $pimg.attr('src', e.target.result); api = $.Jcrop('#cutimg', { setSelect: [ 20, 20, 200, 200 ], aspectRatio: 1, onSelect: updateCoords, onChange:updateCoords }); var bounds = api.getBounds(); boundx = bounds[0]; boundy = bounds[1]; $preview.appendTo(api.ui.holder); }; if (api != undefined) { api.destroy(); } } function updateCoords(obj) { $("#x").val(obj.x); $("#y").val(obj.y); $("#w").val(obj.w); $("#h").val(obj.h); if (parseInt(obj.w) > 0) { var rx = xsize / obj.w; var ry = ysize / obj.h; $pimg.css({ width : Math.round(rx * boundx) + 'px', height : Math.round(ry * boundy) + 'px', marginLeft : '-' + Math.round(rx * obj.x) + 'px', marginTop : '-' + Math.round(ry * obj.y) + 'px' }); } } ; } </script></body></html>
原文链接:http://my.oschina.net/zhengweishan/blog/700677。
- 头像上传裁剪预览功能-java
- springMVC结合Jcrop实现头像上传裁剪预览功能
- java头像裁剪上传
- JAVA + js 实现 头像上传及裁剪功能
- springMVC结合Jcrop实现头像上传裁剪预览功能--javaweb修订版
- uploadify+jcrop实现头像上传裁剪功能
- flash + php头像上传预览裁剪组件1.8发布了
- flash + php头像上传预览裁剪组件1.8
- H5图片上传预览、裁剪功能
- 图片预览、上传、剪裁(类似于CSDN的头像上传功能)
- phonegap头像裁剪上传
- iOS 上传头像 裁剪
- iOS ---上传头像 裁剪
- android裁剪头像上传
- iOS 头像裁剪上传
- Vue头像上传,裁剪
- Java实现图片裁剪预览功能
- jquery 上传头像预览
- 交互式输入输出程序实例
- charles 抓mac
- Incompatible ssh peer (no acceptable kex algorithm)
- linux定时任务的设置
- 'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件。
- 头像上传裁剪预览功能-java
- mysql导出数据结构
- Android设计模式之一个例子让你彻底明白装饰者模式(Decorator Pattern)
- 数据结构实验之二叉树四:还原二叉树
- hdu1105
- DirectShow的基本单元:Filter
- 快慢指针应用(一)
- Java字符串格式化String.format常用用法
- 什么是线程安全