首先,请移步http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin下载iamge cropper的有关js文件及css文件,下载demo学会使用;
java提供后台,页面图片展示位置点击弹出模态框,模态框上file框选择后图片立即上传原图至服务器并展示在页面(展示需要弄个代理),页面进行缩放,选取时,提交x(横坐标),y(纵坐标),fator缩放比例至后台,后台根据这些参数对图片进行裁剪,裁剪成功后再讲图片关闭弹出模态框,模态框页面调用父页面js进行赋值,也就是把截取后的图片显示在主页面上;
提供关键代码:
模态框选择完图片需要展示在截取框的servlet(web.xml中配好):
/**
* Title: 通用文件下载Servlet
* Description: 通用文件下载Servlet
* Copyright: Copyright (c) 2015
* Company: ZTE
* @author djw
* @version 1.0
*/
public class DownloadImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final String LOCAL_CHARSET = "UTF-8";
public DownloadImageServlet() {
super();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding(LOCAL_CHARSET);
String filename = request.getParameter("fileName");
String fileType = request.getParameter("fileType");
if (filename == null){
return;
}
else{
filename = new String(filename.getBytes("ISO-8859-1"),LOCAL_CHARSET);
}
// 如果前台没有传入文件路径,则从系统配置文件设置的路径中取
String filepath = request.getParameter("filePath");
if (filepath == null || filepath.trim().equals("")) {
//filepath = Common.getConfig("upload.uploadFileDirectory");
filepath = "C:/Users/djw/Desktop/";
}
else{
filepath = new String(filepath.getBytes("ISO-8859-1"),LOCAL_CHARSET);
}
// 设置响应头和下载保存的文件名
String newName = request.getParameter("newName");
String resFileName = "";
if(newName == null)
{
resFileName = new String(filename.getBytes(), "ISO-8859-1");
}else{
resFileName = new String(newName.getBytes(), "ISO-8859-1");
}
if("video".equals(fileType)){
response.setContentType("video/mp4");
}else{
response.setContentType("APPLICATION/OCTET-STREAM;charset=" + LOCAL_CHARSET);
}
response.setHeader("Content-Disposition", "attachment; filename="" + resFileName + """);
// 打开指定文件的流信息
File f = new File(filepath,filename);
// 写出流信息
/*
* java.io.FileInputStream fileIn = new java.io.FileInputStream(f);
* ServletOutputStream os = response.getOutputStream(); int i_length =
* fileIn.available(); byte buf_1[] = new byte[i_length]; while
* (i_length > 0) { fileIn.read(buf_1); os.write(buf_1); i_length =
* fileIn.available(); } os.close(); fileIn.close();
*/
response.setContentLength((int) f.length());
int i = 0;
byte[] bt = new byte[8192];
ServletOutputStream sos = null;
FileInputStream fis = null;
try {
fis = new FileInputStream(f);
sos = response.getOutputStream();
while ((i = fis.read(bt)) != -1) {
sos.write(bt, 0, i);
}
} catch (FileNotFoundException ex) {
}
catch (Exception ex){
}
finally {
if (sos != null) {
try {
sos.flush();
sos.close();
} catch (IOException ex) {
}
sos = null;
}
if (fis != null) {
try {
fis.close();
} catch (IOException ex) {
}
}
}
}
页面展示图片可以用 项目地址+"DownloadImageServlet?"+图片名