spring mvc 使用jcrop进行头像剪切 -

liuguofeng

浏览: 450253 次
性别:
来自: 成都

最近访客更多访客>>

zjingye

cargoo

fkshl

freeman01

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

spring mvc 使用jcrop进行头像剪切

博客分类：

Java

源码下载地址：http://download.csdn.net/detail/liuguofeng719/8029603
公司直接可以拿来使用


package com.fileupload.rest;

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.coobird.thumbnailator.Thumbnails;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

@Controller
public class ClipAvatarCotroller {

	@RequestMapping(value = "/clipUpload")
	public void clipUpload(HttpServletRequest request, HttpServletResponse response) {
		String pathString = request.getRealPath("/");
		MultipartHttpServletRequest mhr = (MultipartHttpServletRequest) request;
		MultipartFile file = mhr.getFile("file");
		try {
			byte[] byt = file.getBytes();
			File f = new File(pathString + File.separator + "upload");
			if (!f.exists())
				f.mkdirs();
			FileOutputStream fis = new FileOutputStream(f.getPath() + File.separator + file.getOriginalFilename());
			fis.write(byt);
			fis.flush();
			fis.close();
			response.getOutputStream().print("/upload/" + file.getOriginalFilename());
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	@RequestMapping(value = "/crop_form")
	public void crop_form(HttpServletRequest request, HttpServletResponse response) {
		int x = Integer.valueOf(request.getParameter("x"));
		int y = Integer.valueOf(request.getParameter("y"));
		int w = Integer.valueOf(request.getParameter("w"));
		int h = Integer.valueOf(request.getParameter("h"));
		String fileName = request.getParameter("fileName");
		String fileString = fileName.substring(fileName.lastIndexOf("\\") + 1);
		String pathString = request.getRealPath("/");
		File f = new File(pathString + File.separator + "clip");
		if (!f.exists())
			f.mkdirs();
		try {
			File f1 = new File(pathString + File.separator + "upload");
			InputStream is = new FileInputStream(f1.getPath() + File.separator + fileString);
			BufferedImage bufferImage = ImageIO.read(is);
			//获取原图的宽和高
			int srcWidth = bufferImage.getWidth();
			int srcHeight = bufferImage.getHeight();
			//X*原图宽/显示需要展示图片框的宽
			//Y*原图高/显示需要展示图片框的高
			//W*原图宽/显示需要展示图片框的宽
			//H*原图高/显示需要展示图片框的高
			//400 * 270 
//			<div class="bigImg" style="float: left;">
//				<img id="srcImg" src="" width="400px" height="270px" />
//			</div>
			int x1 = x * srcWidth / 400;
			int y1 = y * srcHeight / 270;
			int w1 = w * srcWidth / 400;
			int h1 = h * srcHeight / 270;
			Thumbnails.of(bufferImage).sourceRegion(x1, y1, w1, h1).size(w, h).keepAspectRatio(false).toFile(
					f.getPath() + File.separator + UUID.randomUUID().toString().replaceAll("-", "") + ".jpg");
		} catch (IOException e) {
			e.printStackTrace();
		}

	}
}

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>裁剪Demo</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css"
			href="<%=request.getContextPath()%>/css/jquery.Jcrop.css">
		<script src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
		<script src="<%=request.getContextPath()%>/js/jquery.Jcrop.min.js"></script>
		<style>
			
			.jcrop-holder #preview_box {
			  display: block;
			  position: absolute;
			  z-index: 2000;
			  top: 10px;
			  right: -280px;
			  padding: 6px;
			  border: 1px rgba(0,0,0,.4) solid;
			  background-color: white;
			  -webkit-border-radius: 6px;
			  -moz-border-radius: 6px;
			  border-radius: 6px;
			  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
			  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
			  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
			}
		
			#preview_box .preview-container {
			  width: 200px;
			  height: 200px;
			  overflow: hidden;
			}
			
		</style>
		<script>
			var jcrop_api,boundx,boundy;
			$(function(){
				$("#iframe-hidden").bind("load",function(){
					var imgpath = $("#iframe-hidden").contents().find("pre").text();
					$("#srcImg").attr("src","."+imgpath);
					$("#previewImg").attr("src","."+imgpath);
					cutImage();
				});
			});
			//裁剪图像
			function cutImage(){
				$("#srcImg").Jcrop( {
					aspectRatio : 1,
					onChange : showCoords,
					onSelect : showCoords,
					minSize :[200,200]
				},function(){
			      // Use the API to get the real image size
			      var bounds = this.getBounds();
			      boundx = bounds[0];
			      boundy = bounds[1];
			      // Store the API in the jcrop_api variable
			      jcrop_api = this;
			      // Move the preview into the jcrop container for css positioning
			      //$preview.appendTo(jcrop_api.ui.holder);
			    });
				//简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
				function showCoords(obj) {
					$("#x").val(obj.x);
					$("#y").val(obj.y);
					$("#w").val(obj.w);
					$("#h").val(obj.h);
					
					if (parseInt(obj.w) > 0) {
						//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
						var rx = $("#preview_box .preview-container").width() / obj.w;
						var ry = $("#preview_box .preview-container").height() / obj.h;
						//通过比例值控制图片的样式与显示
						$("#previewImg").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"
						});
					}
				}
			}
			function changeFile(){
				var file = $("#fName").val();
				$("#fileName").val(file);
			}
		</script>
	</head>
	<body>
		<form method="post" action="clipUpload" enctype="multipart/form-data"
			target="iframe-hidden">
			<input type="text" name="name" />
			<input type="file" name="file" id="fName" onchange="changeFile(this)"/>
			<input type="submit" />
		</form>
		<iframe id="iframe-hidden" name="iframe-hidden" style="display:none;"></iframe>
		<div id="cutImage">
			<div class="bigImg" style="float: left;">
				<img id="srcImg" src="" width="400px" height="270px" />
			</div>
			<div id="preview_box">
			    <div class="preview-container">
			      <img id="previewImg" src="" class="jcrop-preview" alt="Preview" />
			    </div>
			</div>
			<div>
				<form action="crop_form" method="post" id="crop_form">
					<input type="hidden" id="bigImage" name="bigImage" />
					<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" />
					<input type="hidden" id="fileName" name="fileName" />
					<p>
						<input type="submit" value="确认" id="crop_submit" />
					</p>
				</form>
			</div>
		</div>
	</body>
</html>

源代码下载地址：

分享到：

Java缩略图生成库之Thumbnailator应用说明 | Lucene / Solr 开发经验

2014-10-12 17:33
浏览 1449
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

spring mvc 使用jcrop进行头像剪切

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

spring mvc 使用jcrop进行头像剪切

评论

发表评论

相关推荐

非对称加密算法-DH算法

非对称加密算法-RSA算法

OAuth的机制原理讲解及开发流程

FindBugs规则整理

Java网络编程——远程通讯可选技术及原理

UML类图几种关系的总结

关联、组合、聚合、依赖关系比较

组合，聚合，关联，依赖 的区别

设计指导原则

Java缩略图生成库之Thumbnailator应用说明

Lucene / Solr 开发经验

高并发量网站解决方案

response.setHeader()的用法

iBatis整理——Spring环境下批处理实现

Java NIO系列教程（八） SocketChannel

Java NIO系列教程（七） FileChannel

Java NIO系列教程（六） Selector

Java NIO系列教程（五） 通道之间的数据传输

Java NIO系列教程（四） Scatter/Gather

Java NIO系列教程（三） Buffer

最近访客更多访客>>

组合，聚合，关联，依赖的区别

Java NIO系列教程（五）通道之间的数据传输