JCrop+GraphicsMagick+Im4Java 实现图像裁减
Im4Java的安装文档见:http://blog.csdn.net/tangpengtao/article/details/9208047
JCrop的插件:jquery.Jcrop.js
安装GraphicsMagick 和IM4JAVA:http://blog.sina.com.cn/s/blog_872758480100xufm.html
IM4Java的jar:im4java-1.2.0.jar
jcrop的调用js如下:
/**
* 上传头像成功后保存
* @param file
*/
uploadMyPicSuccess: function(file, data){
var filePath = data.path; // 附件地址
var width = data.width; // 原图宽度
var height = data.height; // 原图高度
var containWidth = 445;
var containHeight = 314;
var marginLeft = (containWidth - width) / 2;
var marginTop = (containHeight - height) / 2;
//截取区域的图片
$("#img_1").css({width:width, height:height, "margin-left":marginLeft, "margin-top":marginTop})
.attr("src", fileURL+'/'+data.path);
//50*50规格
$("#img_3").attr("src", fileURL+'/'+data.path);
//120*120规格
$("#img_2").attr("src", fileURL+'/'+data.path);
if(jcrop) jcrop.destroy();
var jcrop = $.Jcrop("#img_1", {
aspectRatio: 1,
onChange: showPreview,
//showPreview为裁剪图片的function,后面写
onSelect: showPreview,
setSelect: [ 0, 0, 100, 100]
});
$(".jcrop-holder").css({"margin-left":marginLeft, "top":marginTop});
//创建隐藏域,保存头像真实存储路径
$("#newUrl").val(filePath);
//点击预览按钮
$("#previewBtn").show().click(function(){
cropPic();
});
// 获取裁剪后的图片,预览
function cropPic(){
var mypic =$("#newUrl").val();
$.ajax({
async: false,
type: "POST",
dataType:"json",
cache: false,
url: baseURL +"/userinfo/cropPic",//裁剪图片的action
data: "imageX=" +cropImage.x + "&imageY=" + cropImage.y + "&imageWidth=" + cropImage.w + "&imageHeight=" + cropImage.h + "&fileUrl=" + encodeURIComponent(mypic),
success: function(data){
if(data.success){
var smallPicUrl = data.path.split(",")[0];
var normalPicUrl = data.path.split(",")[1];
// 创建隐藏域,保存小图
$("#smallUrl").val(smallPicUrl);
$("#img_3").attr("src", fileURL+"/" + smallPicUrl);
$("#img_2").attr("src", fileURL+"/" + normalPicUrl);
// 激活保存按钮
$("#saveBtn").show();
}
},
error:function(data){
alert("更新失败,请重新上传 ");
}
});
} },
定义裁剪预览:
//图片裁剪预览
window.cropImage = {};
//选中裁剪内容后,获取裁剪坐标
function showPreview(coords){
cropImage.x = coords.x;
cropImage.y = coords.y;
cropImage.w = coords.w==0?1:coords.w;
cropImage.h = coords.h==0?1:coords.h;
}
图片处理:
1.图片上传后,假设显示图片的区域为413*350,则,上传后,把图片按原有的尺寸,等比裁减
/**
* 上传个人头像
* @param request
* @param response
* @param file 上传的图片
* @param width 界面裁剪控件的宽度
* @param height 界面裁剪控件的高度
* @throws IOException
*/
@RequestMapping(value = "/uploadHeadPic")
public void uploadHeadPic(HttpServletRequest request,
HttpServletResponse response, @RequestParam("file")
MultipartFile file, @RequestParam(value="width",defaultValue="445")int width,
@RequestParam(value="height",defaultValue="314") int height) throws IOException {
if (logger.isDebugEnabled()) {
logger.debug("头像上传开始");
}
// 响应JSON
Map<String, Object> result = new HashMap<String, Object>();
boolean success = false;
String fileName = file.getOriginalFilename();
// 生成一个临时文件名
fileName = "tmp_" + GenUUIDHelper.genFileName(fileName);
if (FileUtils.isPicture(fileName)) {
Map<String, Object> r = fileManage.resizePicture(file.getInputStream(),fileName,request.getSession().getServletContext().getRealPath("/"), width, height);
String url = (String) r.get("path");
if (url != null) {
result.put("path", url.replace("\\", "/"));
result.put("width", r.get("width"));
result.put("height", r.get("height"));
success = true;
} else {
success = false;
}
}
result.put("success", success);
if (logger.isDebugEnabled()) {
logger.debug("swf上传结束");
}
// 输出响应,文件上传不支持ajax方式的响应contentType,所以不能使用ResponseBody
response.setCharacterEncoding(HttpUtil.ENCODING_UTF8);
ObjectMapper objectMapper = new ObjectMapper();
try {
JsonGenerator jsonGenerator = objectMapper.getJsonFactory().createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
objectMapper.writeValue(jsonGenerator, result);
response.getOutputStream().flush();
} catch (IOException e) {
logger.error("writeResponse", e);
} }
2.点击预览后,按尺寸 120*120 和 50*50裁减2张图片,并返回图片路径,做为预览图片
/**
* 裁剪个人头像;
* @param request
* @param response
* @param x
* @param y
* @param width
* @param height
* @param fileUrl
* @throws Exception
*/
@RequestMapping(value = "/cropPic")
public void cropPic(HttpServletRequest request, HttpServletResponse response,
@RequestParam("imageX") Double x,
@RequestParam("imageY") Double y,
@RequestParam("imageWidth") Double width,
@RequestParam("imageHeight") Double height,
@RequestParam("fileUrl") String fileUrl) throws Exception{
if (logger.isDebugEnabled()) {
logger.debug("裁剪个人头像开始");
}
String contentPath=request.getSession().getServletContext().getRealPath("/");
fileUrl = contentPath + File.separator + fileUrl;
if (logger.isDebugEnabled()) {
logger.debug("fileUrl="+fileUrl);
}
Map<String, Object> resultMap = new HashMap<String, Object>();
File imgFile = new File(fileUrl);
if (imgFile.exists()) {
if (logger.isDebugEnabled()) {
logger.debug("imgFile.exists...........");
}
// 压缩并保存文件
String[] fileKey = fileManage.cropPicture(fileUrl, contentPath,x.intValue(), y.intValue(), width.intValue(), height.intValue());
resultMap.put("success", true);
resultMap.put("path", fileKey[0].replace("\\", "/") + "," + fileKey[1].replace("\\", "/"));
}else{
resultMap.put("success", false);
}
if (logger.isDebugEnabled()) {
logger.debug("swf裁剪个人头像结束");
} // 输出响应,文件上传不支持ajax方式的响应contentType,所以不能使用ResponseBody
response.setCharacterEncoding(HttpUtil.ENCODING_UTF8);
ObjectMapper objectMapper = new ObjectMapper();
try {
JsonGenerator jsonGenerator = objectMapper.getJsonFactory().createJsonGenerator(response.getOutputStream(), JsonEncoding.UTF8);
objectMapper.writeValue(jsonGenerator, resultMap);
response.getOutputStream().flush();
} catch (IOException e) {
logger.error("writeResponse", e);
}
}
3.共用的图片处理类:
@Component()
public class Im4JavaPictureHandle implements IPictureHandle {
private static Log logger = LogFactory.getLog(Im4JavaPictureHandle.class); @Override
public void cropImage(String srcPath, String newPath, int x, int y, int width,
int height, int saveWidth, int saveHeight) throws Exception { IMOperation op = new IMOperation();
op.addImage(srcPath); /**
* width:裁剪的宽度
* height:裁剪的高度
* x:裁剪的横坐标
* y:裁剪的挫坐标
*/
op.crop(width, height, x, y);
op.resize(saveWidth, saveHeight);
op.addImage(newPath); ConvertCmd convert = new ConvertCmd(true); //linux下不要设置此值,不然会报错
if(!System.getProperty("os.name").equals("Linux")&&!StringUtils.isNullOrEmpty(FileConsts.GRAPHICS_MAGICK_PATH))
{
convert.setSearchPath(FileConsts.GRAPHICS_MAGICK_PATH);
}
convert.run(op);
}
@Override
public int[] resizeImage(String srcPath, String newPath, int width,
int height) throws Exception {
int[] target = scaleWidthAndHight(srcPath,width,height);
width = target[0];
height = target[1];
IMOperation op = new IMOperation();
op.addImage(srcPath);
op.resize(width, height);
op.addImage(newPath); ConvertCmd convert = new ConvertCmd(true); //linux下不要设置此值,不然会报错
if(!System.getProperty("os.name").equals("Linux")&&!StringUtils.isNullOrEmpty(FileConsts.GRAPHICS_MAGICK_PATH))
{
convert.setSearchPath(FileConsts.GRAPHICS_MAGICK_PATH);
}
convert.run(op);
return target;
} public int[] scaleWidthAndHight(String srcPath,int w,int h) throws IOException{
Image srcImage = null;
int[] target = new int[2]; FileInputStream oldIs = new FileInputStream(srcPath); srcImage = javax.imageio.ImageIO.read(oldIs); //得到图片原始大小,以便按比例压缩
int width = srcImage.getWidth(null);
int height = srcImage.getHeight(null); // 特殊处理 当w和h均为0时,长,宽默认为图片原大小
if(w==0 && h==0){
w = width;
h = height;
}else if(h==0){ if(width>=w){
h = (int)Math.round((height * w * 1.0 / width));
}else{
w = width;
h = height;
}
}
else{ if ( width >= height){
if(width >= w){
h = (int)Math.round((height * w * 1.0 / width));
}else{
w = width;
h = height;
}
}else{
if(height >= h ){
w = (int)Math.round((width * h * 1.0 / height));
}else{
w = width;
h = height;
}
} }
target[0] = w;
target[1] = h;
oldIs.close();
return target;
}
}
在linux和windows下的安装分别如下:
http://www.cnblogs.com/jennybackup/p/3951935.html
JCrop+GraphicsMagick+Im4Java 实现图像裁减的更多相关文章
- GraphicsMagick+im4java 图片处理
最近团队内部分享GraphicsMagick+im4java 图片处理 就把如何安装,运行都统一整理一下. 详细如下: 在windows上安装ImageMagick: download 地址:http ...
- GraphicsMagick+im4java实现高质量大图的处理
http://www.open-open.com/lib/view/open1355754261963.html 做网站往往需要处理各种各样的图片,对于jdk自带的一套图片处理库,他的特点是稳定简单, ...
- GraphicsMagick+Im4Java在windows和linux下的配置
GraphicsMagick介绍及安装 Im4Java包为: im4java-1.2.0.jar 直接在lib下引用即可 GraphicsMagick的安装如下: windows下: 安装:Graph ...
- GraphicsMagick +im4java高并发处理大型网站图片工具-图片剪切、遮蔽、水印添加之环境搭建
环境: centos 6.5 GraphicsMagick 下载安装 准备环镜: 需要依赖zlib图片操作函数库 下载地址:http://www.zlib.net/ 编译安装 .tar.gz cd z ...
- GraphicsMagick 号称图像处理领域的瑞士军刀
标签: librarydelegatesimage图像处理fontstiff 2012-09-13 10:15 2496人阅读 评论(0) 收藏 举报 分类: java技术(52) 简介 ...
- jQuery Jcrop API参数说明(中文版)(转)(图片剪切)
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- 海思h264解码库
海思的dll,解码h264 解码后转出yuv12 dll自己百度下载 hi_h264dec.dll hi_h264dec_w.dll 调用方法: if (H264Dec.Hi264DecA ...
- app后端设计(12)--图片的处理
app上线后,不断接受用户的反馈,于是,反馈非常差的情况下,都会有app的改版. 一旦app的改版,都会有比较大的UI改动,一改动UI,那么图片的尺寸也就必须要改变. 在app后端设计(1)—api( ...
随机推荐
- Jqgrid学习API
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- 二叉树的实现与一些基本操作(C++环境)
#include<cstdio>#include<cstdlib>#include<iostream>#include<cstring>using na ...
- 长沙市轨道交通工程BIM应用招标公告
摘要: 长沙市轨道交通集团有限公司对其长沙市轨道交通3号线一期工程建筑信息模型(BIM)技术应用项目进行国内公开招标 长沙市轨道交通集团有限公司对其长沙市轨道交通3号线一期工程建筑信息模型(BIM)技 ...
- Java随笔三
1.接口: 1)接口不是类,不能使用new运算符实例化一个接口,而是对类的一组需求描述,这些类要遵循接口描述的统一格式进行定义.个人感觉像C语言中的函数在头文件中的预先声明,但是包含了一些类的特点,比 ...
- SqlServer性能优化 自定义动化性能收集(四)
配置数据收集器: 1.创建登录名并映射角色 2.配置管理数据仓库 3.创建收集组.收集项----MSDB数据存储 sp_syscollector_create... 4.自动配置相关job 具体步 ...
- 连接WCF报EntityFramework.SqlServer 错误的解决方法
现象: The Entity Framework provider type 'System.Data.Entity.SqlServer.SqlProviderServices, EntityFram ...
- android 滚动的缓冲图片
-----------------------java实现代码------------------------- private Animation mRotate; mRotate = Animat ...
- Java(二)
课后,我查阅相关学习资料和Java API制作了以下界面,界面包含了单选按钮(JRadioButton).复选框(JCheckBox).组合框(JComboBox).单行文本输入框(JTextFiel ...
- kafka性能基准测试
转载请注明出处:http://www.cnblogs.com/xiaodf/ 1.测试环境 该benchmark用到了六台机器,机器配置如下 l IntelXeon 2.5 GHz processo ...
- JDBC连接数据库(PreparedStatement)
PreparedStatement是在数据库端防止SQL注入漏洞的SQL方法这里演示了一些基本使用方法同样使用Oracle数据库,之前已经手动建立了一张t_account表数据库代码参见上一篇< ...