在項目中，我們需要做些類似頭像上傳，圖片裁剪的功能，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 xx軸* @param yy軸* @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=cx; var y=cy; var w=cw; var h=ch; $("#x1").val(parseInt(x )); $("#y1").val(parseInt(y)); $("#w").val(parseInt(w)); $("#h").val(parseInt(h)) ; if (parseInt(cw) > 0){ var rx = xsize / cw; var ry = ysize / ch; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math. round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * cx) + 'px', marginTop: '-' + Math.round(ry * cy) + 'px' }) ; } } }); </script> </head> <body> <h1>Java開發QQ頭像裁剪系統</h1> <div> <img id="cutImage" src="images/1.jpg" > <div id="preview-pane"> <div> <img src="images/1.jpg" /> </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>效果圖：
以上就是本文的全部內容，希望大家能夠喜歡。