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 {

	  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>

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

Java实现图片裁剪预览功能的更多相关文章

js实现FileUpload选择图片后预览功能
当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...
node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
cropper.js实现图片裁剪预览并转换为base64发送至服务端。
一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...
javascript实现京东淘宝等商城的商品图片大图预览功能
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理当鼠标移入某一图片内部时,图片上部会出现一 ...
javascript实现京东淘宝等商城的商品图片大图预览功能（图片放大器）
在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理当鼠标移入某一图片内部时,图片上部会出 ...
JavaScript实现图片裁剪预览效果~（第一个小玩具）
感觉开始学习的前一个月真的太不珍惜慕课网的资源了上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解大概收藏了百来门或大或小的课程有一个感觉就是学这个真的比光是看书看概 ...
为Dynamics CRM注释的图片附件做个预览功能
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复163或者20151017可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! Dynamics CRM中注释可 ...
CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...

随机推荐

Jquery实现全选和取消全选的方法
<input type="checkbox" id="all" />全选<br /> <input type="chec ...
[BZOJ1564][NOI2009]二叉查找树树形dp 区间dp
1564: [NOI2009]二叉查找树 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 879 Solved: 612[Submit][Status] ...
JS / jquery 实现页面面板拖动 QQ网页版登陆页面拖动
参考:慕课网DOM实践探秘 http://www.imooc.com/learn/138 实现需求:点击页面头部,可以拖动面板.使用js原生和jquery 各实现一次. 可以学到:1.鼠标在当前页面的 ...
Unity3D实现DoubleClick的一种方法
代码简单粗暴如下: void OnMouseDown() { ) { t2 = DateTime.Now; , , , , )) //时间间隔小于500ms,认为是双击 { // 双击后的操作 } t ...
[Jquery]斑马线表格
<!doctype html> <html> <head> <script src='js/jquery-1.9.1.min.js'></scri ...
ZCMU Problem E: Subarray GCD（n个数的最大公约数）
Problem E: Subarray GCD Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 44 Solved: 27[Submit][Status ...
ubuntu 进入 pycharm（社区版）
先进入到pycharm所在的目录,然后进入bin 然后./pycharm.sh 例如,我把pycharm 放在桌面上 su ➜ xushukui cd '/home/xushukui/桌面/pycha ...
Python 升级3.6
首先:更新gcc,因为gcc版本太老会导致新版本python包编译不成功代码如下:#yum -y install gcc 然后下载python源tar包可利用linux自带下载工具wget下载,如下 ...
Swift中计算String的长度
extension String { var length: Int { return countElements(self) } // Swift 1.1 } extension ...
Delphi Thread
Thread给几点说明:1.MyThread的实例作为TForm1的成员变量2.不要使用Form1这个全局变量,线程中可要使用它的Handle,你可以在Form中创建MyThread的实例时把Hand ...

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能的更多相关文章

随机推荐

热门专题