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

随机推荐

Java 的初始化顺序
初始化顺序: 1.将对象内存空间初始化为二进制0(所有的数据成员被设为默认值) 2.如果该类有基类则初始化其基类(调用默认基类构造器,也可在子类构造器中指定调用基类的某个构造器) 3. 静态成员和静态 ...
yum,httpd,php环境搭建方法
#删除已有的yum 1 rpm -qa|grep yum|xargs rpm -e --nodeps 2 ls 3 rpm -ivh python-iniparse-0.3.1-2.1.el6. ...
AC日记——逆序对洛谷 P1908
逆序对思路: 线段树水过: 代码: #include <cstdio> #include <cstring> #include <iostream> #inclu ...
Python3中的新特性(2)——常见陷阱
1.文本与字节 Python3对文本字符串(字符)和二进制数据(字节)进行了严格区分,'hello'表示一个以Unicode编码保存的文本字符串,而b'hello'表示一个字节字符串. 在Python ...
codeforces734E
题目连接:http://codeforces.com/contest/734/problem/E E. Anton and Tree time limit per test 3 seconds mem ...
洛谷 P3371 【模板】单源最短路径【链式前向星+SPFA】
题目描述如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...
POJ 2438 Children's Dining(哈密顿回路)
题目链接:http://poj.org/problem?id=2438 本文链接:http://www.cnblogs.com/Ash-ly/p/5452615.html 题意: 有2*N个小朋友要坐 ...
python3爬虫爬取猫眼电影TOP100（含详细爬取思路）
待爬取的网页地址为https://maoyan.com/board/4,本次以requests.BeautifulSoup css selector为路线进行爬取,最终目的是把影片排名.图片.名称.演 ...
hdu6155
hdu6155 题意给出一个只由 \(01\) 组成的字符串 \(s\),有两种操作: 翻转区间 \([l, r]\) 查询区间 \([l, r]\) 有多少不同的子串分析首先考虑怎么统计区间有 ...
ZOJ 2112 Dynamic Rankings （动态第 K 大）（树状数组套主席树）
Dynamic Rankings Time Limit: 10 Seconds Memory Limit: 32768 KB The Company Dynamic Rankings has ...

Java实现图片裁剪预览功能

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

随机推荐

热门专题