WEB实战:头像裁剪

24 篇文章 0 订阅
15 篇文章 0 订阅

头像截图在sns的网站用到的非常多,一般分为以下几步来实现这样的功能

1)上传图片,保存到图片服务器(tfs)

2)前台js计算截图区域的坐标、宽、高,将数据提交后台

3)后台java按坐标处理原始图片,再将截取后的图片保存到图片服务器(tfs)

 

 先看看Jcrop截图的效果,它是jQuery的一个插件

 

参考http://deepliquid.com/projects/Jcrop/demos.php?demo=handler,代码如下:

    var showCoords = function(c){
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    }	
    $('#jcrop_target').Jcrop({
            onChange:showCoords,
            onSelect:showCoords
    });

获取截图区域的坐标信息,这里需要考虑图片长宽的缩放比例,计算好准确的数值(x、y、w、h)传给服务器,由java类在原图的基础上进行裁剪。

1.根据图片File对象或者流,转换成BufferedImage对象

BufferedImage bi = ImageIO.read(file);
或者
ByteArrayInputStream bis = new ByteArrayInputStream(bos.toByteArray());
BufferedImage bi = ImageIO.read(bis);

ImageIO还支持其它参数如下:

 

2.获取ImageWriter

private static ImageWriter getImageWriter(BufferedImage bi) {
    ImageWriter writer = null;
    ImageTypeSpecifier type = ImageTypeSpecifier.createFromRenderedImage(bi);
    Iterator iter = ImageIO.getImageWriters(type, "jpg");
    if (iter.hasNext()) {
        writer = (ImageWriter) iter.next();
    }
    return writer;
}

 

3.设置Writer参数

ImageWriteParam param = writer.getDefaultWriteParam();
param.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
param.setCompressionQuality((float) 1.0);
param.setSourceRegion(new Rectangle(x, y, width, height));

 

4.输出Image文件或者流

IIOImage iioImage = new IIOImage(bi, null, null);
ByteArrayOutputStream bos2 = new ByteArrayOutputStream();
ImageOutputStream outputStream = ImageIO.createImageOutputStream(bos2);
writer.setOutput(outputStream);
writer.write(null, iioImage, param);

 

5.将流对象保存到文件系统

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值