Java如何实现图片裁剪预览功能
程序员文章站
2024-03-05 08:51:48
在项目中，我们需要做些类似头像上传，图片裁剪的功能，ok看下面文章！
需要插件：jquery jcrop
后端代码：
package org.csg.upl...
在项目中，我们需要做些类似头像上传，图片裁剪的功能，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>
效果图：
以上就是本文的全部内容，希望大家能够喜欢。
上一篇： Android实现图片左右滑动效果