关闭

Java实现图片裁剪预览功能

标签: Java实现图片裁剪预览
673人阅读 评论(1) 收藏 举报
分类:



在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章!


需要插件:jQuery Jcrop 

后端代码:


package org.csg.upload;

import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
public class Upload {
	/**
	 * @author  小夜的传说
	 * @param path1 图片原路径
	 * @param path2  裁剪后存储的路径
	 * @param x x轴
	 * @param y y轴
	 * @param w
	 * @param h
	 */
	public static void CutImage(String path1,String path2,int x,int y,int w,int h){
		FileInputStream fileInputStream=null;
		ImageInputStream iis=null;
		
		try {
			//读取图片文件,建立文件输入流
			fileInputStream=new FileInputStream(path1);
			//创建图片的文件流 迭代器
			Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");
			ImageReader reader=it.next();
			//获取图片流 建立文图 文件流
			iis=ImageIO.createImageInputStream(fileInputStream);
			//获取图片默认参数
			reader.setInput(iis, true);
			ImageReadParam param=reader.getDefaultReadParam();
			//定义裁剪区域
			Rectangle rect=new Rectangle(x,y,w,h);
			param.setSourceRegion(rect);
			BufferedImage bi=reader.read(0,param);
			ImageIO.write(bi, "jpg", new File(path2));
		} catch (Exception e) {
			e.printStackTrace();
			System.out.println("裁剪失败");
		}finally{
			try {
				if(fileInputStream!=null){
					fileInputStream.close();
				}
				if(iis!=null){
					iis.close();
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
			
		}
	}
}

访问代码:

<%@ page language="java" import="java.util.*,org.csg.upload.*" pageEncoding="utf-8"%>
<%
	//图片的相对路径
	String imagPath=request.getParameter("imgPath");
	String relPath=request.getRealPath("/");//获取图片服务器绝对地址
	String newFileName=new Date().getTime()+".jpg";
	//实际图片路径
	String path1=relPath+imagPath;
	//裁剪后存储到服务器的图片路径
	String path2=relPath+"/images/"+newFileName;
	
	int x=Integer.parseInt(request.getParameter("x"));
	int y=Integer.parseInt(request.getParameter("y"));
	int w=Integer.parseInt(request.getParameter("w"));
	int h=Integer.parseInt(request.getParameter("h"));
	try{
	Upload.CutImage(path1, path2, x, y, w, h);
	out.print("<img src='images/"+newFileName+"'/>");
	}catch(Exception e){
	e.printStackTrace();
	out.print("图片裁剪失败");
	}
%>


jsp代码:


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jsp开发头像裁剪</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" href="css/jquery.Jcrop.css" type="text/css" />
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
  	<style type="text/css">
  	*{margin: 0;padding: 0;}
  	.cut{
	  	margin-top: 20px;
  	}
  	 #preview-pane {
		  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-pane .preview-container {
	  width: 250px;
	  height: 170px;
	  overflow: hidden;
	}
  	</style>
  	<script type="text/javascript">
  		$(function(){
	  		var jcrop_api,
	        boundx="",
	        boundy="",
	        $preview = $('#preview-pane'),
	        $pcnt = $('#preview-pane .preview-container'),
	        $pimg = $('#preview-pane .preview-container img'),
	        xsize = $pcnt.width(),
	        ysize = $pcnt.height();
  			 $('#cutImage').Jcrop({
  			 	onChange:showCoords,//获取选中的值
  			 	onSelect:showCoords,//获取拖拽的值
  			 	aspectRatio: xsize / ysize
  			 },function(){
			      var bounds = this.getBounds();
			      boundx = bounds[0];
			      boundy = bounds[1];
			      jcrop_api = this;
			      $preview.appendTo(jcrop_api.ui.holder);
			    });
  			 function showCoords(c){
  			 	var x=c.x;
  			 	var y=c.y;
  			 	var w=c.w;
  			 	var h=c.h;
  			 	$("#x1").val(parseInt(x));
  			 	$("#y1").val(parseInt(y));
  			 	$("#w").val(parseInt(w));
  			 	$("#h").val(parseInt(h));
  			 if (parseInt(c.w) > 0){
			        var rx = xsize / c.w;
			        var ry = ysize / c.h;
			        $pimg.css({
			          width: Math.round(rx * boundx) + 'px',
			          height: Math.round(ry * boundy) + 'px',
			          marginLeft: '-' + Math.round(rx * c.x) + 'px',
			          marginTop: '-' + Math.round(ry * c.y) + 'px'
			        });
			      }
  			 }
  		});
  	</script>
  </head>
  <body>
 	<h1>Java开发QQ头像裁剪系统</h1>
 	<div class="cut">
 		<img id="cutImage" alt="" src="images/1.jpg" >
 		<div id="preview-pane">
		    <div class="preview-container">
		      <img src="images/1.jpg" class="jcrop-preview" alt="Preview" />
		    </div>
 		</div>
 	</div>
  <form action="success.jsp" method="post" >
  	<input type="text" value="images/1.jpg" name="imgPath">
  	x轴:<input type="text" size="4" id="x1" name="x" />
  	y轴:<input type="text" size="4" id="y1" name="y"/>
  	宽度:<input type="text" size="4" id="w" name="w"/>
  	高度:<input type="text" size="4" id="h" name="h"/>
  	<input type="submit" value="裁剪"/>
  </form>
  </body>
</html>



效果图,觉得好,就看下面的源码吧?




2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    知识分享
    个人资料
    • 访问:22373次
    • 积分:547
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:0篇
    • 译文:0篇
    • 评论:22条
    博客专栏
    最新评论