互联网时代,越来越丰富多彩。当然,这离不开网络上各种各样的图片。然而,这也提高了我们对图片处理的要求。像百度、腾讯这样的数量级的处理,如果对图片的上传没有一些优化,那么每年多花费五六十台服务器、额外话费几百万人民币的支出,去处理图片完全是可能发生的。所以图片的处理,值得我们重视。
今天,我们先不讲那么大的处理,因为一般人也接触不到那么大的量级图片处理。并且也是由于处理起来相对复杂,我们日后慢慢渗透介绍。
如今,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" οnchange="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"
οnclick="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代码。。。不想费那个劲,项目中够用就得了】。