欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Java如何实现图片裁剪预览功能

程序员文章站 2024-03-05 08:51:48
在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jquery jcrop 后端代码: package org.csg.upl...

在项目中,我们需要做些类似头像上传,图片裁剪的功能,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>

效果图:

Java如何实现图片裁剪预览功能

以上就是本文的全部内容,希望大家能够喜欢。