高仿QQ头像截取

标签: 头像裁剪
6003人阅读 评论(16) 收藏 举报
分类:

       花费了半天时间,把 仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧:










支持的功能:

    1.选择裁剪的图片支持手势放大缩小(包括双击放大缩小);

    2.判断图片边缘,即裁剪区域不会超过图片边缘;

原理:

一个重写的RelativeLayout,里面放了两层View,下层是重写的支持缩放的ImageView用于放置选择裁剪的图片,ImageView上层是一个自定义View,通过onDraw画上去的一个白色的圆圈圈代表裁剪区域;事实上,在本demo中,当你点击确定 时,裁剪下来的是一个正方形的区域,如下图:


裁剪出的正方形bitmap方法(mHorizontalPadding为裁剪区离屏幕左右的距离,mVerticalPadding为裁剪区离屏幕上下的距离):

Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(),Bitmap.Config.ARGB_8888);
		Canvas canvas = new Canvas(bitmap);
		draw(canvas);
		//若为裁剪为方形区域,则去掉getCircleBitmap方法即可
		return getCircleBitmap(Bitmap.createBitmap(bitmap, mHorizontalPadding,
				mVerticalPadding, getWidth() - 2 * mHorizontalPadding,
				getWidth() - 2 * mHorizontalPadding));

只是将最终生成的方形bitmap转换为了圆形的bitmap:

/**
	 * 将方形bitmap转换为圆形bitmap
	 * @param bitmap
	 * @return
	 */
	private Bitmap getCircleBitmap(Bitmap bitmap) {  
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Config.ARGB_8888);  
        Canvas canvas = new Canvas(output); 
        final int color = 0xff424242; 
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());  
        Paint paint =new Paint();
        paint.setAntiAlias(true);  
        canvas.drawARGB(0, 0, 0, 0);  
        paint.setColor(color); 
        int x = bitmap.getWidth(); 
        canvas.drawCircle(x / 2, x / 2, x / 2, paint);  
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));  
        canvas.drawBitmap(bitmap, rect, rect, paint); 
        return output;
	}

ClipImageLayout中有一个变量是mHorizontalPadding,此为裁剪区圆形边界距离屏幕边缘的距离,值越大,裁剪区域就越小,反之越大(当然不能小于0);

需要注意的是:

在裁剪界面ClipActivity,需要加上

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN)

以防止不同手机的通知栏高度会影响判断裁剪区域是否超出图片范围的准确性;

并且,裁剪界面是将选择的图片转换为bitmap进行显示的,如果资源过大,会导致内存溢出,所以还需要进行一步压缩:

Bitmap bitmap=ImageTools.convertToBitmap(path, 600,600);

另:如若想改为裁剪方形头像,则可将裁剪界面裁剪区域边框改为正方形即可:

		//方形边框
//		canvas.drawRect(mHorizontalPadding, mVerticalPadding, getWidth()- mHorizontalPadding, getHeight() - mVerticalPadding, mPaint);
		//圆形边框
		canvas.drawCircle( getWidth()/2, getHeight()/2, getWidth()/2-mHorizontalPadding, mPaint);

并在裁剪后生成的bitmap方法中去掉将其 转换为圆形bitmap的方法即可,代码中注释的也非常清楚。


源码奉上:http://download.csdn.net/detail/baiyuliang2013/8467647


升级版已放出,请看下篇文章:高仿QQ头像截取升级版





查看评论

仿QQ头像自定义截取功能

看了android版QQ的自定义头像功能,决定自己实现,随便熟悉下android绘制和图片处理这一块的知识。先看看效果: 重点内容 思路分析:这个效果可以用两个View来完成,上层View是一...
  • cao12345cong
  • cao12345cong
  • 2016-10-11 10:50:32
  • 918

仿QQ头像选择以及上传Demo(完整代码)

  • 2016年10月18日 22:41
  • 21.11MB
  • 下载

ios中QQ头像裁剪(圆环)

ios中QQ头像裁剪
  • qq351420450
  • qq351420450
  • 2015-04-23 00:05:59
  • 948

安卓高仿QQ头像截取升级版

观看此篇文章前,请先阅读上篇文章:高仿QQ头像截取; 本篇之所以为升级版,是在截取头像界面添加了与qq类似的阴影层(裁剪区域以外的部分),且看效果图:   为了适应大家不同需求,这次打了两个包,及上...
  • baiyuliang2013
  • baiyuliang2013
  • 2015-03-03 17:47:38
  • 4924

仿QQ圆头像裁剪开源项目——ClipCircleHeadLikeQQ

1.项目背景: 很多项目中用到的头像都是圆头像,圆头像使界面看起来更具有美感,比如QQ在整个应用中使用的就是圆头像。基本上每个应用都有上传头像的功能,在上传头像的时候需要对图片裁剪。虽然截取出来的图片...
  • taotao110120119
  • taotao110120119
  • 2015-10-18 22:13:56
  • 5155

仿微信通过拍照或者本地图片裁剪完美更换头像

  • 2015年11月18日 09:38
  • 7.97MB
  • 下载

iOS 头像裁剪上传

打开本地相册或打开本地相机拍照,获取图片裁剪图片,上传图片 加入头文件 #import #import #import 123123 全部变量 NSString*THE_IMG_PATH; NSS...
  • LiqunZhang
  • LiqunZhang
  • 2017-03-22 10:23:03
  • 641

Android:高仿QQ头像截取

花费了半天时间,把 仿QQ头像截取的方法整理了下,并制作了一个demo以供大家参考,基本上实现了qq中我的资料界面上(包括背景透明化,上滑标题栏显示,下拉隐藏等)的大致效果,先上图看效果吧: ...
  • HMYANG314
  • HMYANG314
  • 2015-03-03 15:03:31
  • 1855

iOS中类似QQ圆形头像 处理

_sendImgView.image = model.sendImage;     _sendImgView.layer.masksToBounds = YES;     _sendImgVie...
  • u013664733
  • u013664733
  • 2016-01-22 13:48:02
  • 608

jquery头像截取类似qq截图功能

  • 2012年06月15日 09:05
  • 2.91MB
  • 下载
    个人资料
    专栏达人
    等级:
    访问量: 36万+
    积分: 4881
    排名: 7293
    微信公众号AndroidMax
    博客专栏
    最新评论