关闭

高仿QQ头像截取

标签: 头像裁剪
5841人阅读 评论(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头像截取升级版





8
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

qq头像源码

  • 2014-02-16 08:40
  • 1.20MB
  • 下载

C#图片选择器类似QQ选择头像

  • 2013-12-30 16:08
  • 529KB
  • 下载

c#实现qq头像选取

  • 2011-11-18 10:17
  • 68KB
  • 下载

C# 将正方形头像转化成圆形头像(例如:qq头像)

转载于:http://blog.csdn.net/chinacsharper/article/details/50854852 看图: 点击转化后效果: 实现代码如下: ...
  • qq_23126581
  • qq_23126581
  • 2017-08-10 11:03
  • 658

仿QQ头像裁剪功能

  • 2015-06-02 16:40
  • 910KB
  • 下载

iOS中类似QQ圆形头像 处理

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

ios中QQ头像裁剪(圆环)

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

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

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

Android 仿照QQ剪裁头像(完结篇)

转载请注明出处: http://blog.csdn.net/u014163726?viewmode=contents 本文出自Wrh的博客 闲扯最近刚好空闲下来又因为以前有人问到过这个仿q...
  • u014163726
  • u014163726
  • 2015-09-09 17:20
  • 2633

仿QQ头像裁剪功能

转载请注明出处:http://blog.csdn.net/binbinqq86/article/details/46331561 项目中要用到图片裁剪,调用了系统自带的裁剪功能,发现不好用,于是就自...
  • binbinqq86
  • binbinqq86
  • 2015-06-02 16:18
  • 1238
    个人资料
    • 访问:346110次
    • 积分:4706
    • 等级:
    • 排名:第7164名
    • 原创:95篇
    • 转载:10篇
    • 译文:0篇
    • 评论:392条
    我的微博
    微信公众号AndroidMax
    博客专栏
    最新评论