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=& ...
随机推荐
- k8s 组件架构
一.整体架构 kubernetes分为 master节点和工作节点,前者是管理节点,后者是容器运行的节点.其中master节点主要有3个重要组件,分别是APIServer,sheduler和contr ...
- Android局域网访问webservice以及其中的一些问题
应老师的要求,要做个安卓app,实现备份app上的数据到服务器上的mongodb上,网上搜了下相关的实现方式.利用webservice技术,具体来说就是客户端直接调用服务器端的接口.之前从来没接触这玩 ...
- 两个sql设计方案的比较
我有一个买方表Buyer,大概1万条记录:一个卖方表Sale,大概5万条记录.有一些买方和卖方之间是有某种关联的,这种关联关系被记录在Partner表里,Partner表中的关键字段包括BuyerID ...
- JDBC连接池（数据源）
自定义连接池:用装饰设计模式将原连接的close方法改造成将连接还回数据源:装饰设计模式:http://www.cnblogs.com/tongxuping/p/6832518.html: 开源数据库 ...
- Codeforces Round #424 A（模拟）
#include<cstdio> ]; int main(){ scanf("%d",&n); ;i<=n;++i)scanf("%d" ...
- Web应用程序指纹识别工具BlindElephant
Web应用程序指纹识别工具BlindElephant BlindElephant是一款Web应用程序指纹识别工具.该工具可以读取目标网站的特定静态文件,计算其对应的哈希值,然后和预先计算出的哈希值 ...
- [Codeforces 26E] MultiThreading
Brief Intro: 给你n个数,每个数有2*CNT[i]个,让你构造一个序列 使得最终的Y值为W(其余见题面) Solution: 就是一道纯构造的题目: 先把特殊情况特殊处理,接下来考虑一般情 ...
- 【dfs序】【set】bzoj3991 [Sdoi2015]寻宝游戏
在考试代码的基础上稍微改改就a了……当时为什么不稍微多想想…… 插入/删除一个新节点时就把其dfn插入set/从set中删除. 当前的答案就是dfn上相邻的两两节点的距离和,再加上首尾节点的距离. 比 ...
- 【费用流】BZOJ1061[NOI2008]-志愿者招募
[题目大意] 一个项目需要n天完成,其中第i天至少需要Ai个人.共有m类人可以招募,其中第i类可以从第Si天做到第Ti天,每人的招募费用为Ci元.求最小招募费用. [思路] byvoid神犇的建图详解 ...
- 解决VM虚拟机中的ubuntu不能全屏的问题
Ctrl+alt+T:打开终端 输入命令:sudo apt install open-vm* 运行之后重启一下虚拟机就可以了