jQuery+Jcrop 實現圖片裁剪預覽功能
在項目中，我們需要做些類似頭像上傳，圖片裁剪的功能，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> 
本文由用戶 m8gy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！