低像素Bitmap圆形头像实现边缘锐化

问题

• 在项目中从存储设备中读取出的低像素Bitmap（圆形头像，在实现圆形切割的时候出现边缘模糊的情况，在尝试普通的圆形头像实现方法的过程中，发现平时使用的圆形头像方法并不生效，觉得可能是因为画布拉伸，所以在拉伸的画布上面进行绘制Circle的时候得到的也是低像素的圆形
• 下面是我在分析问题且尝试过程中使用的画圆型头像的方法：

普通绘制圆形头像

• 直接在画布上绘制圆形
• 效果：边缘存在锯齿

/**
* 直接在画布上绘制圆形
* 效果：边缘存在锯齿
*
* @param bitmap
* @return
*/
private Bitmap createRoundPhoto1(Bitmap bitmap){
    int width = bitmap.getWidth();
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    Bitmap circleBitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(circleBitmap);
    canvas.drawCircle(width / 2, width / 2, width / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, 0, 0, paint);
    return circleBitmap;
}

绘制圆角矩形演变绘制圆形

• 从绘制圆角矩形的方法演变而来
• 效果：边缘存在锯齿

/**
* 从绘制圆角矩形的方法演变而来，效果：边缘存在锯齿
*
* @param bitmap
* @return
*/
private Bitmap createRoundPhoto2(Bitmap bitmap){
    int size = Math.min(bitmap.getWidth(), bitmap.getHeight());
    Bitmap circleBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(circleBitmap);
    canvas.drawARGB(0, 0, 0, 0);
    Paint paint = new Paint();
    Rect rect = new Rect(0, 0, size, size);
    RectF rectF = new RectF(rect);
    paint.setColor(Color.RED);
    paint.setAntiAlias(true);
    canvas.drawCircle( size / 2, size / 2, size / 2, paint);
    Rect src = new Rect(0, 0, size, size);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, src, rectF, paint);
    return circleBitmap;
}

clipPath裁剪圆形

• 效果：存在锯齿

/**
* 不是好的实现方式clipPath会存在锯齿
* 效果：边缘存在锯齿
*
* @param bitmap
* @return
*/
private Bitmap createRoundPhoto3(Bitmap bitmap){
    int width = bitmap.getWidth();
    Paint paint = new Paint();
    PaintFlagsDrawFilter paintFlagsDrawFilter = new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    Bitmap circleBitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(circleBitmap);
    Path path = new Path();
    path.addCircle(width/2, width/2, width/2, Path.Direction.CW);
    canvas.clipPath(path);
    //对canvas设置抗锯齿的滤镜，防止变化canvas引起画质降低
    canvas.setDrawFilter(paintFlagsDrawFilter);
    canvas.drawBitmap(bitmap, 0, 0, paint);
    return circleBitmap;
}

使用BitmapShader

• 使用BitmapShader—画圆形图像比较好的实现方式是用BitmapShader
• 但是在实际项目中下面的方法实现的还会存在小部分的锯齿效果，判断出问题存在于画布的缩放
• 效果：边缘存在锯齿

/**
* 使用BitmapShader---画圆形图像比较好的实现方式是用BitmapShader
* 但是在实际项目中下面的方法实现的还会存在小部分的锯齿效果，判断出问题存在于画布的缩放
* 效果：边缘存在锯齿
*
* @param bitmap
* @return
*/
private Bitmap createRoundPhoto4(Bitmap bitmap){
    int width = bitmap.getWidth();
    BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    Bitmap circleBitmap = Bitmap.createBitmap(width, width, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(circleBitmap);
    paint.setShader(bitmapShader);
    canvas.drawCircle(width/2, width/2, width/2, paint);
    return circleBitmap;
}

实现画布的缩放

• 上面分析出是画布的大小变化，那么实现画布的缩放
• 效果：边缘锯齿减少

/**
* 上面分析出是画布的大小变化，那么实现画布的缩放，效果：边缘锯齿减少
*
* @param bitmap
* @param imageViewSize
* @return
*/
private Bitmap createRoundPhoto5(Bitmap bitmap, int imageViewSize){
    if(bitmap == null){
        return null;
    }
    float scaleSize = ((float) imageViewSize) / bitmap.getWidth();
    Matrix matrix = new Matrix();
    matrix.setScale(scaleSize, scaleSize);
    Bitmap scaleRes = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
    //直接在scaleRes上面进行裁剪会发生错误
    Bitmap output = Bitmap.createBitmap(scaleRes.getWidth(), scaleRes.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    canvas.drawARGB(0, 0, 0, 0);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    canvas.drawCircle(scaleRes.getWidth() / 2.0f, scaleRes.getWidth() / 2.0f, scaleRes.getWidth() / 2.0f, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(scaleRes, 0, 0, paint);
    canvas.scale(1 / scaleSize, 1/ scaleSize, scaleRes.getWidth() / 2.0f, scaleRes.getWidth() / 2.0f);
    return output;
}

解决

• 将画布的缩放和BitmapShader结合起来，效果：消除锯齿效果
• 因为是画布可能会出现拉伸的情况，所以我想出的解决方案是，先将Bittmap放大，然后在放大后的Bitmap上进行画圆，之后，再将整张画布缩放回原来的大小，最后发现，虽然Bitmap原来是低像素，但是经过上述操作后，Bitmap的像素可能会更低，但是边缘达到了想要的效果—圆滑

private Bitmap createRoundScalePhoto(Bitmap bitmap, int imageViewSize){
    if(bitmap == null){
        return null;
    }
    int size = Math.min(bitmap.getWidth(), bitmap.getHeight());
    Log.d("WJX", size + " ");
    Bitmap output = Bitmap.createBitmap(imageViewSize, imageViewSize, Bitmap.Config.ARGB_8888);
    float scaleNum = 0;
    if(size != 0) {
        scaleNum = imageViewSize / size;
    }
    float scaleNumReciprocal = size / imageViewSize;
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    BitmapShader bitmapShader = new BitmapShader(bitmap , Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Matrix matrix = new Matrix();
    matrix.setScale(scaleNum, scaleNum);
    bitmapShader.setLocalMatrix(matrix);
    paint.setShader(bitmapShader);
    Canvas canvas = new Canvas(output);
    canvas.drawCircle(imageViewSize / 2.0f, imageViewSize / 2.0f, imageViewSize / 2.0f, paint);
    canvas.scale(scaleNumReciprocal, scaleNumReciprocal, imageViewSize / 2/0f, imageViewSize / 2.0f);
    bitmap.recycle();
    return output;
}

• 注意：

  • 由于用 BitmapFactory 解析出来的 bitmap 对象不能更改，每一个方法都需要创建一个 bitmap 副本才能对其进行编辑
  • 对Bitmap操作之后，需要执行Bitmap.recycle()对静态资源实现释放

• 实现效果：