使用jcrop截取指定大小的图片

最新推荐文章于 2020-06-28 22:04:50 发布

iteye_11495

最新推荐文章于 2020-06-28 22:04:50 发布

阅读量630

点赞数

文章标签： java ui javascript ViewUI

1、到http://deepliquid.com/content/Jcrop.html网站上下载jcrop包，将css、demo_files包添加到项目中，如下图所示：

2、selectfile.jsp的代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img');

$('#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);
});
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 = 200 / obj.w;
var ry = 200 / obj.h;
//通过比例值控制图片的样式与显示
$('#preview-pane .preview-container img').css( {
width : Math.round(rx * $("#srcImg").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
height : Math.round(ry* $("#srcImg").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
marginLeft : "-" + Math.round(rx * obj.x) + "px",
marginTop : "-" + Math.round(ry * obj.y) + "px"
});
}
}

});
function changeImg(){
document.forms[0].submit();
}

</script>
<link rel="stylesheet" href="demo_files/main.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">

.jcrop-holder #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: 200px;
height: 200px;
overflow: hidden;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="no-cache">

<title>top</title>
</head>
<body> 

获取图片：
<div id="cutImage" >
<div class="bigImg" >
<form action="<%=request.getContextPath() %>/upload" method="post" enctype="multipart/form-data">
上传文件：<input type="file" name="file1" id="sf" οnchange="changeImg();"/><br/>

</form>
<%
String path=(String)request.getSession().getAttribute("imageUrl");
if(path!=null){
out.println(path);
%>
<img alt="" src="<%=path %>" width="30%" height="30%" id="srcImg" >
<div id="preview-pane">
<div class="preview-container">
<img src="<%=path %>" class="jcrop-preview" alt="Preview" />

</div>
</div>
<%
}
%>
</div>
</div>

<form action="<%=request.getContextPath() %>/UpdatePhoto" method="post" name="crop_form" >
<input type="hidden" id="bigImg" name="bigImage" value="<%=path %>"/>
<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" />
<p><input type="submit" value="保存" id="crop_submit" /></p>
</form>
预览图片：
<%
String str=(String)request.getParameter("url");
out.print(str);
if(str!=null){
%>
<div id="preview_box" class="previewImg" >
<img id="previewImg" src="../upload/<%=str %>?tempid=<%=Math.random() %>" name="previewImg"/>
</div>
<%
}
%>

</body>
</html>

3、切割图片的java代码：

package com.jcrop;

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 java.io.IOException;

import javax.imageio.ImageIO;

public class ImageCut {
/***
* 图片切割
* @param imagePath 原图地址
* @param x 目标切片坐标 x轴起点
* @param y 目标切片坐标 y轴起点
* @param w 目标切片宽度
* @param h 目标切片高度
*/
public String cutImage(String imagePath,int x,int y,int w,int h){
Image img;
ImageFilter cropFilter;

try {
//读取源图像
BufferedImage bi=ImageIO.read(new File(imagePath));
int srcWidth=bi.getWidth();//原图宽度
int srcHeight=bi.getHeight();//原图高度
//若原图大小大于大于切片大小，则进行切割
if(srcWidth>=w&&srcHeight>=h){
Image image=bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
//int x1=x*srcWidth/400;
//int y1=y*srcHeight/270;
//int w1=w*srcWidth/400;
//int h1=h*srcHeight/270;
int x1=x;
int y1=y;
int w1=w;
int h1=h;

cropFilter=new CropImageFilter(x1,y1,w1,h1);
img=Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(),cropFilter));
BufferedImage tag=new BufferedImage(w1,h1,BufferedImage.TYPE_INT_BGR);
Graphics g=tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();

String url=imagePath.substring(0,imagePath.lastIndexOf("\\")+1);
String name=imagePath.substring(imagePath.lastIndexOf("\\")+1);
System.out.println(name);
String[] src=name.split("\\.");
imagePath=src[0].concat("cut.").concat(src[1]);
url=url.concat(imagePath);
System.out.println(imagePath);

ImageIO.write(tag, "JPEG",new File(url) );

}

} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return imagePath;
}
}

4、将生成的图片返回到selectfile.jsp页面的java类

package com.jcrop;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class UpdatePhoto extends HttpServlet {

public UpdatePhoto() {
super();
}

public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

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 bigImage=request.getParameter("bigImage");
String[] imageNames=bigImage.split("/");
String imageName=imageNames[imageNames.length-1];
String imagePath=getServletContext().getRealPath("upload");
//String imagePath=request.getContextPath()+"\\"+imageName;
imagePath=imagePath+"\\"+imageName;
ImageCut imageCut=new ImageCut();
String url=imageCut.cutImage(imagePath, x, y, w, h);
System.out.println("url:"+url);
//request.setAttribute("url", url);
//System.out.println("xxxxxx"+request.getAttribute("url"));

response.sendRedirect("jcrop/selectfile.jsp?url="+url);
doGet(request, response);
}

public void init() throws ServletException {
// Put your code here
}

}

5、效果如下：

补充问题

使用ie8浏览器加载图片时，若图片改变，名字不变，浏览器会加载之前的照片，若显示当前照片需要刷新

解决办法：在图片的路径后加上随机参数，即：<img id="previewImg" src="../upload/<%=str %>?tempid=<%=Math.random() %>" name="previewImg"/>

iteye_11495

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jcrop截取指定大小的图片

1、到http://deepliquid.com/content/Jcrop.html网站上下载jcrop包，将css、demo_files包添加到项目中，如下图所示：2、selectfile.jsp的代码如下&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"...
复制链接

扫一扫