Java实现图片裁剪预览功能

在项目中，我们需要做些类似头像上传，图片裁剪的功能，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 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();

}

}

}

}

访问代码：

//图片的相对路径

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("");

}catch(Exception e){

e.printStackTrace();

out.print("图片裁剪失败");

}

%>

jsp代码：

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Jsp开发头像裁剪

*{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;

}

$(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'

});

}

}

});

Java开发QQ头像裁剪系统

x轴:

y轴:

宽度:

高度:

效果图：