標籤：java實現圖片裁剪預覽
在項目中，我們需要做些類似頭像上傳，圖片裁剪的功能，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("圖片裁剪失敗");}%>
<%@ 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>
，覺得好，就看下面的源碼吧？
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
Java實現圖片裁剪預覽功能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
