• 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("/");//获取图片server绝对地址
    	String newFileName=new Date().getTime()+".jpg";
    	//实际图片路径
    	String path1=relPath+imagPath;
    	//裁剪后存储到server的图片路径
    	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 {
    	   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({
    			           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>
    



    效果图,认为好。就看以下的源代码吧?




  • 相关阅读:
    【原】用IDEA远程Debug Tomcat服务
    【原】getInputStream()与getParameterMap()获得Post请求的数据区别
    【原】使用Eclipse远程Debug测试环境
    【原】配置MySQL服务器端的字符集
    【原】Spring整合Redis(第三篇)—盘点SDR搭建中易出现的错误
    【原】Spring整合Redis(第二篇)—SDR环境搭建具体步骤
    【原】Spring整合Redis(第一篇)—SDR简述
    【转】InitializingBean的作用
    【原】Redis windows下的环境搭建
    【原】Maven解决jar冲突调试步骤:第三方组件引用不符合要求的javassit导致的相关异常
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/6746961.html
Copyright © 2020-2023  润新知