头像截图在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.将流对象保存到文件系统
相关推荐
STM32F103实现EMWIN 嵌入式GUI可视化设计。 项目支持STM32F10X系列单片机调测和移植。 项目代码可直接编译、运行。
1.实例演示和原理讲解 2.从摄像头中获取图像 3.从图库中获取图像 4.在 Android 上对图像进行裁剪 5.图像上传并在服务器保存图像
STM32F407 EMWIN GUI实战。项目支持STM32F40X系列单片机调测和移植。项目可直接编译、运行。
最近看回以前改的flash版头像裁剪,譬如,浮士德头像裁剪,发现了一些bug,还有一些不尽如意的地方,譬如,图片上传的方式没有遵守web的mutipart标准,整个组件没有组件化便于调用。当然,还有就是没有将源代码和可...
PowerPoint2021新技巧:随意裁剪图片.docx
flash+php头像裁剪上传.rarflash+php头像裁剪上传.rarflash+php头像裁剪上传.rar
小程序轻便原生的头像裁剪功能,直接引用即可,可以自定义裁剪宽高
qq自定义头像裁剪,可以直接复制到你的工程里面用,效果很好
Android高仿微信头像裁剪
phonegap头像裁剪上传,http://blog.csdn.net/zhuangzi111/article/details/34105231
地学计算机制图(MAPGis):实验七:图形裁剪.doc
头像裁剪demo仿QQ头像裁剪直接下载可以运行
android 仿微信头像裁剪,中间的裁剪框 是圆形或者方形,支持手势双击缩放,多手指移动缩放,移动图片
最近看到不少朋友都想要js写的头像裁剪上传的代码,所以自己结合插件研究了一下写了一个,不足之处望大家指正
这个头像编辑器用的美图秀秀开放平台上下载下来的,可以离线使用。 功能包含:摄像头拍照、头像裁剪、旋转、图片特效、美容特效、边框特效。...图片在线裁剪源码、头像裁剪上传 源码、 头像截取上传 源码
JavaScript头像裁剪上传组件
三种不同方式实现头像裁剪,有方形的又圆形的。
android相册选择,头像裁剪,圆形图片处理,功能强大,欢迎下载参考
通过canvas实现图片裁剪,最后在通过canvas获取裁剪区域的图片base64编码,上传服务器保存图片!