Java如何實現圖片裁剪預覽功能

2019-11-26 15:03:12

字體：大中小

來源：轉載

供稿：網友

在項目中，我們需要做些類似頭像上傳，圖片裁剪的功能，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>

效果圖：