图片裁剪入门Jcrop
2015-06-28 10:55
274 查看
互联网时代，越来越丰富多彩。当然，这离不开网络上各种各样的图片。然而，这也提高了我们对图片处理的要求。像百度、腾讯这样的数量级的处理，如果对图片的上传没有一些优化，那么每年多花费五六十台服务器、额外话费几百万人民币的支出，去处理图片完全是可能发生的。所以图片的处理，值得我们重视。
今天，我们先不讲那么大的处理，因为一般人也接触不到那么大的量级图片处理。并且也是由于处理起来相对复杂，我们日后慢慢渗透介绍。
如今，QQ上都是晒结婚照的（年龄问题？老了？），微信上都是微商的广告。那么QQ和微信上面的图片裁剪功能大家一定都用过吧。今天就跟大家介绍这个好玩的功能。
实现步骤：
1、使用JQuery的AjaxSubmit进行图片上传；
2、使用Jcrop进行图片裁剪；
3、封装Images对象，封装裁剪后的图片的大小。
实现如下：
Images对象：
切割方法：
预览效果：
JQuery Jcrop裁剪API：http://code.ciaoca.com/jquery/jcrop/
注意点：
1、本文实现中预览中显示的为图片的原大小。所以，img标签不能限制显示大小，不然会导致裁剪区域不准确。【解决办法就是按照图片预览显示比例，传递裁剪大小，想清楚了，实现很简单】；
2、裁剪过程中，及时显示图片的大小【未实现，这个在Jcrop的API中没有找到相关实现，需要自己写CSS代码。。。不想费那个劲，项目中够用就得了】。
今天，我们先不讲那么大的处理，因为一般人也接触不到那么大的量级图片处理。并且也是由于处理起来相对复杂，我们日后慢慢渗透介绍。
如今，QQ上都是晒结婚照的（年龄问题？老了？），微信上都是微商的广告。那么QQ和微信上面的图片裁剪功能大家一定都用过吧。今天就跟大家介绍这个好玩的功能。
实现步骤：
1、使用JQuery的AjaxSubmit进行图片上传；
2、使用Jcrop进行图片裁剪；
3、封装Images对象，封装裁剪后的图片的大小。
实现如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/end/css/jquery.Jcrop.css"/>
<script type="text/javascript" src="/end/js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="/end/js/jquery.form.js"></script>
<script type="text/javascript" src="/end/js/jquery.Jcrop.js"></script>
</head>
<body>
<div id="body">
<div class="container">
<div class="clearfixs mr_created">
<div>
<div class="content">
<form id="addProductNewFrm" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
<input type="hidden" id="pc0" name="url"/>
</form>
<div>
预览：
<img id="cutimg" src=""/>
</div>
<div>
<span class="col-md-5">
<div class="form-group">
<label class="control-label">产品logo： </label>
<div class="form-control">
<form id="form2" action="#" enctype="multipart/form-data">
<input type="hidden" id="x" name="images.x"/>
<input type="hidden" id="y" name="images.y"/>
<input type="hidden" id="w" name="images.w"/>
<input type="hidden" id="h" name="images.h"/>
<table title="" width="80" border="1" cellspacing="0.1" cellpadding="0.1">
<tr>
<td colspan="2">添加产品图片：</td>
</tr>
<tr>
<td colspan="2">
<input id="fileupload" name="fileupload" type="file" onchange="readURL(this);"/>
</td>
</tr>
<tr>
<td width="159" rowspan="2" align="center">
<div id="showImage" style="width: 100px; height: 100px">
</div>
</td>
<td width="64" height="27px" align="right">
<input id="btnProductNew" type="button" style="width: 64" class="right-button02"
onclick="uploadImage()" value="上传" />
</td>
</tr>
<tr>
<td>
<div id="tipDiv"></div>
</td>
</tr>
</table>
</form>
</div>
</div>
</span>
</div>
<div style="height: 200px"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var uploadImageFlag=false;
function uploadImage() {
if(uploadImageFlag == false){
uploadImageFlag =true;
$(document).ready(function() {
var options = {
url : "/end/app/upload/uploadFile.shtml",
type : "POST",
dataType : "text",
success : function(msg) {
if (msg.indexOf("#") > 0) {
var data = msg.split("#");
$("#tipDiv").html(data[0]);
$("#fileupload").val("");
$("#pc2").val(data[1]);
$("#showImage").html("<img style='width:100px;height:100px' src='/"+data[1]+"'/>");
} else {
$("#tipDiv").html(msg);
}
uploadImageFlag = false;
}
};
$("#form2").ajaxSubmit(options);
return false;
});
}else {
console.info("please do not resubmit");
}
}
</script>
<script type="text/javascript">
var api = null;
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$('#cutimg').removeAttr('src');
$('#cutimg').attr('src', e.target.result);
api = $.Jcrop('#cutimg', {
aspectRatio: 1,
onSelect: updateCoords,
onChange: updateCoords,
minSize:[20,20]
});
};
if (api != undefined) {
api.destroy();
}
}
function updateCoords(obj) {
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
};
}
</script>
</body>
</html>Images对象：
package com.huchi.huchipay.entity;
public class Images {
private int x;
private int y;
private int w;
private int h;
public int getX() {
return x;
}
public void setX(int x) {
this.x = x;
}
public int getY() {
return y;
}
public void setY(int y) {
this.y = y;
}
public int getW() {
return w;
}
public void setW(int w) {
this.w = w;
}
public int getH() {
return h;
}
public void setH(int h) {
this.h = h;
}
}切割方法：
/**
* @MethodName : imgCut
* @Description : 图片切割
* @param fileupload 原图片的file文件
* @param images 图片的x、y、w、h
* @param savePath 新图片保存的位置
*/
public static void imgCut(File fileupload,Images images,String savePath) {
try {
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(fileupload);
int srcWidth = bi.getWidth();
int srcHeight = bi.getHeight();
if (srcWidth >= images.getW() && srcHeight >= images.getH()) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(images.getX(), images.getY(), images.getW(), images.getH());
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(images.getW(), images.getH(),BufferedImage.TYPE_INT_BGR);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
//输出文件
ImageIO.write(tag, savePath.substring(savePath.lastIndexOf(".")+1), new File(savePath));
}
} catch (Exception e) {
e.printStackTrace();
}
}预览效果：
JQuery Jcrop裁剪API：http://code.ciaoca.com/jquery/jcrop/
注意点：
1、本文实现中预览中显示的为图片的原大小。所以，img标签不能限制显示大小，不然会导致裁剪区域不准确。【解决办法就是按照图片预览显示比例，传递裁剪大小，想清楚了，实现很简单】；
2、裁剪过程中，及时显示图片的大小【未实现，这个在Jcrop的API中没有找到相关实现，需要自己写CSS代码。。。不想费那个劲，项目中够用就得了】。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Linux:Problem with MergeList /var/lib/apt/lists
- centos7 安装SSH
- shell脚本中的输入输出
- Linux学习笔记
- 自动化Nginx服务器的反向代理的配置方法
- Openwrt 学习记录：Makefile 框架分析（二)
- Openwrt 学习记录：编译环境安装及目录介绍(一）
- centos下yum安装lamp
- Linux内存管理
- MapReduce计数器
- cluster
- 对Nginx支持SSL的性能进行优化的方法
- 【Hadoop】9、hadoop1.2.1完全分布式安装过程异常报错
- 如何在CentOS 7中禁用IPv6
- 如何在 Linux 中安装漂亮的 GTK+ 扁平化主题 Arc
- 如何在 Linux 中安装漂亮的 GTK+ 扁平化主题 Arc
- Java 使用JDBC链接MySQL数据库（Linux）
- shell awk入门
- 【Hadoop】8、基于虚拟机的Hadoop1.2.1完全分布式集群安装
- 第三篇 学习OpenCV之图像变换（2）