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=& ...

随机推荐

为用户分配角色 C#
开发网站时,在后台管理系统中,如果有多类角色,将会涉及到为角色分配用户的功能,或者是为用户选择角色.为用户分配角色相对来说操作的数据量比较小,因为系统所设定的角色不会有很多种.而如果是为角色分配用户, ...
[bzoj3218]a + b Problem 网络流+主席树优化建图
3218: a + b Problem Time Limit: 20 Sec Memory Limit: 40 MBSubmit: 2229 Solved: 836[Submit][Status] ...
django web 自定义通用权限控制
需求:web系统有包含以下5个url,分别对于不同资源: 1.stu/add_stu/ 2.stu/upload_homework/ 3.stu/query_homework/ 4.stu/add_r ...
Windows下python的第三方库的安装
D:\Python27\Scripts\pip.exe install beautifulsoup4
golang笔记：cookie
在同一个问题上栽了两次,以后碰到cookie出问题多半都是因为这个. Request.Cookie(name)取Cookie的时候,返回值只有name和value cookie.go cookies ...
1090: MTM （费用流）
1090: MTM Time Limit:3000/1000 MS (Java/Others) Memory Limit:163840/131072 KB (Java/Others)Total S ...
( 转 ) .net 操作 JWT
GitHub: https://github.com/jwt-dotnet/jwt 1.JWT定义 JWT(Json Web Token)是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明 ...
【C++】const 常引用的用法
用法: const int & a; 定义了一个整型常引用变量a. 特点: 1.不能够通过常引用变量来修改其值,如: const int & a = 10; a = 12;//编译报错 ...
jQuery的实用技巧
1.禁用页面的右键菜单 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ retu ...
[SRM570]TheTiles
题意:给一个$n\times m$的网格,对这个网格黑白染色,左上角为黑色.现在要用一些大小为$3$的L型图形覆盖这个网格,要求不能重复覆盖同一个格子,不能覆盖到障碍,L型可以进行旋转,但转角处格子必 ...

Java实现图片裁剪预览功能

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

随机推荐

热门专题