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

更新时间：2015年07月29日 11:07:53 作者：小夜的传说

通常注册账户上传用户图像时需要进行预览，这篇文章就是教我们如何用 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("图片裁剪失败");
 }
%>

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>

效果图：

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

您可能感兴趣的文章:

spring配置文件中util:properties和context:property-placeholder用法
这篇文章主要介绍了spring配置文件中util:properties和context:property-placeholder用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-01-01
详解java中finalize的实现与相应的执行过程
在常规的java书籍中,即会描述 object的finalize方法是用于一些特殊的对象在回收之前再做一些扫尾的工作,但是并没有说明此是如何实现的.本篇从java的角度(不涉及jvm以及c++)，有需要的朋友们可以参考借鉴。
2016-09-09
解决springboot项目找不到resources目录下的资源问题
这篇文章主要介绍了解决springboot项目找不到resources目录下的资源问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-08-08
MyBatis学习教程(八)-Mybatis3.x与Spring4.x整合图文详解
这篇文章主要介绍了MyBatis学习教程(八)-Mybatis3.x与Spring4.x整合图文详解的相关资料,需要的朋友可以参考下
2016-05-05
java实现上传网络图片到微信临时素材
这篇文章主要为大家详细介绍了java实现上传网络图片到微信临时素材，网络图片上传到微信服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
详解java实现遍历二叉树的三种情况
这篇文章主要介绍了java实现遍历二叉树的三种情况,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
JavaSE详细讲解异常语法
异常就是不正常，比如当我们身体出现了异常我们会根据身体情况选择喝开水、吃药、看病、等异常处理方法。 java异常处理机制是我们java语言使用异常处理机制为程序提供了错误处理的能力，程序出现的错误，程序可以安全的退出，以保证程序正常的运行等
2022-05-05
Java线程池队列DelayQueue的使用详解
这篇文章主要介绍了Java线程池队列DelayQueue的使用详解,DelayQueue顾名思义,它是个无边界延迟队列,它的底层是基于PriorityBlockingQueue实现的,该队列中的元素都是按照过期时间顺序排序的,队列头部放的是即将过期的元素,需要的朋友可以参考下
2023-12-12
Java concurrency之公平锁(二)_动力节点Java学院整理
这篇文章主要为大家详细介绍了Java concurrency之公平锁的第二篇内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
彻底搞明白Spring中的自动装配和Autowired注解的使用
这篇文章主要介绍了彻底搞明白Spring中的自动装配和Autowired注解的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03