android圆形图片裁剪demo以及实现

前段时间做用户头像设置与上次,由于设计需要,将用户头像裁剪成圆形并设置上传.感觉裁剪成圆形图片的功能,以后很可能会用到,加之网上这一类的demo总结注释的不好,于是自己就做了demo并写好注释上传.

废话少说,先上图:

关键代码:

一:调用系统摄像头拍照后获取图片然后裁剪流程

1:调用系统摄像头拍照

/**
 * 打开系统摄像头拍照获取图片
 */
private void openCamera() {
    String state = Environment.getExternalStorageState();
    if (state.equals(Environment.MEDIA_MOUNTED)) {
        Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);//设置Action为拍照

        if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.M) {
            imageUri = Uri.fromFile(headIconFile);
        } else {
            //FileProvider为7.0新增应用间共享文件,在7.0上暴露文件路径会报FileUriExposedException
            //为了适配7.0,所以需要使用FileProvider,具体使用百度一下即可
            imageUri = FileProvider.getUriForFile(this,
                    "com.channelst.headimgclip.fileprovider", headIconFile);//通过FileProvider创建一个content类型的Uri
        }
        intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION); //添加这一句表示对目标应用临时授权该Uri所代表的文件
        intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        startActivityForResult(intent, TAKE_PHOTO_REQUEST_CODE);
        Log.e(TAG, "openCamera()---intent" + intent);
    }
}

2.调用系统摄像头返回,进入case TAKE_PHOTO_REQUEST_CODE

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    Log.e(TAG, "onActivityResult()---requestCode" + requestCode
            + ", resultCode : " + resultCode);
    switch (requestCode) {
        case CLIP_PHOTO_BY_SYSTEM_REQUEST_CODE:
            Log.d(TAG,"调用系统剪辑照片后返回.........");
            if (resultCode == RESULT_OK) {
                Bitmap bm = BitmapFactory.decodeFile(headClipFile.getAbsolutePath());

                headImg.setImageBitmap(bm);
                Log.e(TAG, "onActivityResult()---bm : " + bm);
            } else {
                Log.e(TAG, "onActivityResult()---resultCode : " + resultCode);
            }
            break;
        case TAKE_PHOTO_REQUEST_CODE:
            Log.i(TAG,"拍照后返回.........");
            if (resultCode == RESULT_OK) {
                //拍照后返回,调用系统裁剪,系统裁剪无法裁剪成圆形
                //clipPhotoBySystem(imageUri);
                //调用自定义裁剪
                clipPhotoBySelf(headIconFile.getAbsolutePath());
            }
            break;
        case CHOOSE_PHOTO_REQUEST_CODE:
            Log.i(TAG, "从相册选取照片后返回....");
            if (resultCode == RESULT_OK) {

                if (data != null) {
                    String filePath = "";
                    Uri originalUri = data.getData(); // 获得图片的uri
                    Log.i(TAG, "originalUri : " + originalUri);
                    if (originalUri != null) {
                        filePath = GetImagePath.getPath(this,originalUri);
                    }
                    Log.i(TAG, "filePath : " + filePath);

                    if (filePath != null && filePath.length() > 0) {
                        //clipPhotoBySystem(originalUri);
                        //调用自定义裁剪
                        clipPhotoBySelf(filePath);
                    }
                }

            }
            break;
        case CLIP_PHOTO_BY_SELF_REQUEST_CODE:
            Log.i(TAG, "从自定义切图返回..........");
            if (resultCode == RESULT_OK) {

                Bitmap bm = BitmapFactory.decodeFile(headClipFile.getAbsolutePath());
                headImg.setImageBitmap(bm);
                Log.i(TAG, "onActivityResult()---bm : " + bm);

            } else {
                Log.i(TAG, "onActivityResult()---resultCode : " + resultCode);
            }
            break;
    }
}

3.调用自定义裁剪方法,进入ClipPitctureActivity,如图一界面

/**
 * 调用自定义切图方法
 *
 * @param filePath
 */
protected void clipPhotoBySelf(String filePath) {
    Log.i(TAG, "通过自定义方式去剪辑这个照片");
    //进入裁剪页面,此处用的是自定义的裁剪页面而不是调用系统裁剪
    Intent intent = new Intent(this, ClipPictureActivity.class);
    intent.putExtra(ClipPictureActivity.IMAGE_PATH_ORIGINAL, filePath);
    intent.putExtra(ClipPictureActivity.IMAGE_PATH_AFTER_CROP,
            headClipFile.getAbsolutePath());

    startActivityForResult(intent, CLIP_PHOTO_BY_SELF_REQUEST_CODE);

}

4.在ClipPitctureActivity里,在主要布局加载完成后,加入一个自定义的ClipView,该View主要是在图片上方覆盖一层幕布,然后从中间抠出一个圆形

我们先来看clipView的初始化过程:

/**
 * 初始化截图区域，并将源图按裁剪框比例缩放
 *
 */
private void initClipView() {

    Intent intent = getIntent();
    final String originalImgPath = intent.getStringExtra(IMAGE_PATH_ORIGINAL);
    croppedImagePath = intent.getStringExtra(IMAGE_PATH_AFTER_CROP);

    // 首先判断源文件是否存在--防止垃圾数据的影响：
    // 一张图片在SD卡上已经被删除，但是媒体库中还有该数据。
    File file = new File(originalImgPath);
    if (!file.exists()) {
        Toast.makeText(this, "源文件在SD卡上不存在", Toast.LENGTH_SHORT).show();
        finish();
        return;
    }

    ......

    //初始化截图区域自定义view
    clipview = new ClipView(ClipPictureActivity.this);
    clipview.addOnDrawCompleteListener(new ClipView.OnDrawListenerComplete() {

        public void onDrawComplete() {
            clipview.removeOnDrawCompleteListener();
            int radius = (int) clipview.getRadius();
            int midX = (int) clipview.getCircleCenterPX();
            int midY = (int) clipview.getCircleCenterPY();

            int imageWidth = bitmap.getWidth();
            int imageHeight = bitmap.getHeight();
            // 按裁剪框求缩放比例
            float scale = (radius * 3.0f) / imageWidth;

            // 起始中心点
            float imageMidX = imageWidth * scale / 2;
            float imageMidY = imageHeight * scale / 2;
            srcPic.setScaleType(ImageView.ScaleType.MATRIX);

            // 缩放
            matrix.postScale(scale, scale);
            // 平移
            matrix.postTranslate(midX - imageMidX, midY - imageMidY);

            srcPic.setImageMatrix(matrix);
            srcPic.setImageBitmap(bitmap);
        }
    });

    matrix.reset();
    srcLayout.addView(clipview, new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));

}

再来看clipView的onDraw(),如下,onDraw里是先画一个矩形幕布,然后抠出一个圆来,最后画一个白色的边框

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int width = this.getWidth();
    int height = this.getHeight();

    //画矩形region1
    canvas.clipRect(0, 0, width, height);

    //竖屏的时候width取width的1/3作为半径
    // 横屏的时候width>height,取height的1/3作为半径
    int shortWidth = width;

    //画圆形region2
    Path path = new Path();
    circleCenterPX = (float) width/2.0f;
    circleCenterPY = (float) height/2.0f;

    radius = shortWidth/3.0f;
    path.addCircle(circleCenterPX, circleCenterPY, radius, Path.Direction.CCW);
    Log.i("ClipView", "onDraw()--circleCenterPX : " + circleCenterPX
            + ", circleCenterPY : " + circleCenterPY + ", radius : " + radius);
    Log.i("ClipView", "onDraw()--width : " + width + ", height : " + height);
    //path.addCircle(150,150,100, Path.Direction.CCW);
    //XOP表示补集就是全集的减去交集剩余部分,这剩余部分不用遮罩
    //也就相当于从遮罩里抠出一个圆形来
    canvas.clipPath(path, Region.Op.XOR);
    //canvas.clipRect(0,0,400,400);
    paint.setAlpha(((int)(255*0.4f)));
    canvas.drawRect(0, 0, width, height,paint);
    canvas.save();
    canvas.restore();

    // 画圆形边框
    borderPaint.setStyle(Paint.Style.STROKE);
    borderPaint.setAntiAlias(true);
    borderPaint.setColor(Color.WHITE);
    borderPaint.setStrokeWidth(clipBorderWidth);
    canvas.drawCircle(circleCenterPX, circleCenterPY, radius,borderPaint);

    clipWidth = clipHeight = (int) (radius*2);

    if (listenerComplete != null) {
        listenerComplete.onDrawComplete();
    }
}

5.接下来我们看保存图片的过程.

1)获取图片中的包含圆的矩形,2)把获取的矩形选取中间的圆形,也就是getCircleBitmap()方法

/**
 * @return 裁剪后的图片
 * @description 获取裁剪框内截图
 */
private Bitmap getBitmap() {

    try {
        // srcPic.getDrawingCache()获取View截图在某些情况下报错了。
        // 现在用一种新的获取view中图像的方法取代getDrawingCache()方法.
        // 另：在使用createBitmap()增加try..catch..以防止不断生成bitmap可能导致的oom
        int startX = (int) (clipview.getCircleCenterPX() - clipview.getRadius());
        int startY = (int) (clipview.getCircleCenterPY() - clipview.getRadius());
        Log.i(TAG, "getBitmap()：startX=" + startX
                + ",startY=" + startY
                + ",clipview.getClipWidth()=" + clipview.getClipWidth()
                + ",clipview.getWidth()=" + clipview.getWidth()
                + ",clipview.getCircleCenterPX()=" + clipview.getCircleCenterPX()
                + ",clipview.getRadius()=" + clipview.getRadius()
                + ",clipview.getCircleCenterPY()=" + clipview.getCircleCenterPY());
        Bitmap finalBitmap = Bitmap.createBitmap(
                loadBitmapFromView(srcPic),
                startX, startY, clipview.getClipWidth(),
                clipview.getClipHeight());
        // 释放资源
        srcPic.destroyDrawingCache();
        Log.i(TAG, "getBitmap()  finalBitmap=" + finalBitmap);
        return getCircleBitmap(finalBitmap);
    } catch (OutOfMemoryError err) {
        Toast.makeText(this, "保存头像失败", Toast.LENGTH_SHORT).show();
        Log.e(TAG, err.getMessage());
        return null;
    } catch (Exception e) {
        Toast.makeText(this, "保存头像失败!", Toast.LENGTH_SHORT).show();
        Log.e(TAG, e.getMessage());
        return null;
    }

}


/**
 * @description 获取圆形裁剪框内截图
 * @param bitmap src图片
 * @return
 */
public static Bitmap getCircleBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
            Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    //在画布上绘制一个圆 -1是为了去掉白色的边框
    canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
            bitmap.getWidth() / 2 - 1, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    Log.i(TAG, "getCircleBitmap()     output=" + output);
    return output;
}

6.将圆形bitmap通过io流写入到图片文件中,如下

/**
 * @return void
 * @Title: saveMyBitmap
 * @Description: 保存bitmap对象到裁剪后的文件中
 */
public static void saveMyBitmap(File file, Bitmap mBitmap) {
    try {
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdirs();
        }
        if (!file.exists()) {
            file.createNewFile();
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
    FileOutputStream fOut = null;
    try {
        fOut = new FileOutputStream(file);
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    }
    mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
    try {
        fOut.flush();
    } catch (IOException e) {
        e.printStackTrace();
    }
    try {
        fOut.close();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

7.通过setResutl,返回ok

/**
 * 保存图片
 * 首先获取裁剪框里的图片
 * 然后保存到裁剪文件croppedImagePath中
 */
private void saveBitmap() {
    if (bitmap != null) {
        // 取出裁剪图片
        Bitmap clipBitmap = getBitmap();
        Log.i(TAG, "saveBitmap()  clipBitmap=" + clipBitmap);
        File file = new File(croppedImagePath);
        saveMyBitmap(file, clipBitmap);
    }

    Intent intent = new Intent();
    ClipPictureActivity.this.setResult(RESULT_OK, intent);
    finish();
}

8.这时候Mainactivity就收到CLIP_PHOTO_BY_SELF_REQUEST_CODE这个返回,在OnActivityResult即会进入该case

然后headImg这个imageView就将其显示出来.如图二

二:从图库中选择图片然后裁剪流程

从图库中选择图片然后裁剪流程和拍照获取图片裁剪流程差不多,差异只在于图片的获取方式

这里只介绍一下调用系统图库的代码:

点击"从相册选择"这个button即触发如下方法,启动系统相册

/**
 * 从系统图库中选择图片
 */
private void choosePhoto() {
    String state = Environment.getExternalStorageState();
    if (state.equals(Environment.MEDIA_MOUNTED)) {

        Intent openAlbumIntent = new Intent(Intent.ACTION_GET_CONTENT);
        openAlbumIntent.setType(IMAGE_TYPE);
        startActivityForResult(openAlbumIntent, CHOOSE_PHOTO_REQUEST_CODE);

    }
}

选择图片后返回界面即进入CHOOSE_PHOTO_REQUEST_CODE这个case,然后调用自定义裁剪,之后的过程与上面一致了.

最后,把源码上传一下,希望对别人对自己也有帮助.

demo链接

                                                                           @author 北京青牛软件南方基地_码农crst_luo 2017-11-06