Android 拍照、选择图片并裁剪

转载请标明出处：
http://blog.csdn.net/xuehuayous/article/details/51324656;
本文出自:【Kevin.zhou的博客】

前言：前段时间做项目用到了图片裁剪，调用系统裁剪图片，结果在我的小米3上一直有问题，裁剪界面打不开，在其他设备上没问题，于是研究其他软件是怎么做的，淘宝的裁剪图片是自己做的，当然没问题，京东的是调用的系统的也是打不开裁剪界面。但是不知道为什么会出现这个问题，在其他小米设备上貌似没有问题。看来调用系统的裁剪图片还是不靠谱的。

一、 实现效果

    按照之前博客的风格，首先看下实现效果。

    

二、 uCrop项目应用

    想起之前看到的Yalantis/uCrop效果比较绚，但是研究源码之后发现在定制界面方面还是有一点的限制，于是在它的基础上做了修改Android-Crop，把定制界面独立出来，让用户去自由设置。下图为使用Android-Crop实现的模仿微信选择图片并裁剪Demo。

   

三、 实现思路

    比较简单的选择设备图片裁剪，并将裁剪后的图片保存到指定路径；
    调用系统拍照，将拍照图片保存在SD卡，然后裁剪图片并将裁剪后的图片保存在指定路径。

    流程图如下所示：

    
 

四、 选择框实现

    这里通过PopupWindow来实现，当然也可以根据需求采用其他方式实现。实现效果如下图所示：

 

   

1. XML布局

[html] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:gravity="center_horizontal"  
6.     android:orientation="vertical">  
7.   
8.     <LinearLayout  
9.         android:id="@+id/pop_layout"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="wrap_content"  
12.         android:layout_alignParentBottom="true"  
13.         android:background="#444"  
14.         android:gravity="center_horizontal"  
15.         android:orientation="vertical">  
16.   
17.         <Button  
18.             android:id="@+id/picture_selector_take_photo_btn"  
19.             android:layout_width="match_parent"  
20.             android:layout_height="wrap_content"  
21.             android:layout_marginLeft="10dip"  
22.             android:layout_marginRight="10dip"  
23.             android:layout_marginTop="10dp"  
24.             android:background="#4d69ff"  
25.             android:padding="10dp"  
26.             android:text="拍照"  
27.             android:textColor="#CEC9E7"  
28.             android:textSize="18sp"  
29.             android:textStyle="bold" />  
30.   
31.         <Button  
32.             android:id="@+id/picture_selector_pick_picture_btn"  
33.             android:layout_width="match_parent"  
34.             android:layout_height="wrap_content"  
35.             android:layout_marginLeft="10dip"  
36.             android:layout_marginRight="10dip"  
37.             android:layout_marginTop="5dp"  
38.             android:background="#4d69ff"  
39.             android:padding="10dp"  
40.             android:text="从相册选择"  
41.             android:textColor="#CEC9E7"  
42.             android:textSize="18sp"  
43.             android:textStyle="bold" />  
44.   
45.         <Button  
46.             android:id="@+id/picture_selector_cancel_btn"  
47.             android:layout_width="match_parent"  
48.             android:layout_height="wrap_content"  
49.             android:layout_marginBottom="15dip"  
50.             android:layout_marginLeft="10dip"  
51.             android:layout_marginRight="10dip"  
52.             android:layout_marginTop="20dp"  
53.             android:background="@android:color/white"  
54.             android:padding="10dp"  
55.             android:text="取消"  
56.             android:textColor="#373447"  
57.             android:textSize="18sp"  
58.             android:textStyle="bold" />  
59.     </LinearLayout>  
60.   
61. </RelativeLayout>  

2. 代码编写

[java] view plain copy print ?

1. public SelectPicturePopupWindow(Context context) {  
2.     super(context);  
3.     LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
4.     mMenuView = inflater.inflate(R.layout.layout_picture_selector, null);  
5.     takePhotoBtn = (Button) mMenuView.findViewById(R.id.picture_selector_take_photo_btn);  
6.     pickPictureBtn = (Button) mMenuView.findViewById(R.id.picture_selector_pick_picture_btn);  
7.     cancelBtn = (Button) mMenuView.findViewById(R.id.picture_selector_cancel_btn);  
8.     // 设置按钮监听  
9.     takePhotoBtn.setOnClickListener(this);  
10.     pickPictureBtn.setOnClickListener(this);  
11.     cancelBtn.setOnClickListener(this);  
12. }  

创建SelectPicturePopupWindow的时候设置按钮的监听。这里编写一个选择监听接口：

[java] view plain copy print ?

1. /** 
2.  * 选择监听接口 
3.  */  
4. public interface OnSelectedListener {  
5.     void OnSelected(View v, int position);  
6. }  

回调的参数为点击的按钮View以及当前按钮的索引，那么只要在选择监听里面返回接口的回调就可以啦。

[java] view plain copy print ?

1. @Override  
2. public void onClick(View v) {  
3.     switch (v.getId()) {  
4.         case R.id.picture_selector_take_photo_btn:  
5.             if(null != mOnSelectedListener) {  
6.                 mOnSelectedListener.OnSelected(v, 0);  
7.             }  
8.             break;  
9.         case R.id.picture_selector_pick_picture_btn:  
10.             if(null != mOnSelectedListener) {  
11.                 mOnSelectedListener.OnSelected(v, 1);  
12.             }  
13.             break;  
14.         case R.id.picture_selector_cancel_btn:  
15.             if(null != mOnSelectedListener) {  
16.                 mOnSelectedListener.OnSelected(v, 2);  
17.             }  
18.             break;  
19.     }  
20. }  

PopupWindow的初始化创建、监听设置好之后，只要提供显示与隐藏两个方法就可以了。

[java] view plain copy print ?

1. /** 
2.  * 把一个View控件添加到PopupWindow上并且显示 
3.  * 
4.  * @param activity 
5.  */  
6. public void showPopupWindow(Activity activity) {  
7.     popupWindow = new PopupWindow(mMenuView,    // 添加到popupWindow  
8.     ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);  
9.     popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));  
10.     popupWindow.showAtLocation(activity.getWindow().getDecorView(), Gravity.CENTER | Gravity.BOTTOM, 0, 0);  
11.     popupWindow.setAnimationStyle(android.R.style.Animation_InputMethod);   // 设置窗口显示的动画效果  
12.     popupWindow.setFocusable(false);                                        // 点击其他地方隐藏键盘 popupWindow  
13.     popupWindow.update();  
14. }  

[java] view plain copy print ?

1. /** 
2.  * 移除PopupWindow 
3.  */  
4. public void dismissPopupWindow() {  
5.     if (popupWindow != null && popupWindow.isShowing()) {  
6.         popupWindow.dismiss();  
7.         popupWindow = null;  
8.     }  
9. }  

OK，到这里选择框的实现就完成了。

五、使用选择框

    通过我们上面对选择框的封装，使用起来就比较简单了，只需要初始化及设置选择的监听就可以啦。

1.初始化选择框

[java] view plain copy print ?

1. mSelectPicturePopupWindow = new SelectPicturePopupWindow(mContext);  
2. mSelectPicturePopupWindow.setOnSelectedListener(this);  

2.设置选择框监听

[java] view plain copy print ?

1. @Override  
2. public void OnSelected(View v, int position) {  
3.     switch (position) {  
4.         case 0:  
5.             // TODO: "拍照"按钮被点击了  
6.             break;  
7.         case 1:  
8.             // TODO: "从相册选择"按钮被点击了  
9.             break;  
10.         case 2:  
11.             // TODO: "取消"按钮被点击了  
12.             break;  
13.     }  
14. }  

然后在Fragment上进行封装，我们取名为PictureSelectFragment。

六、拍照并保存图片

调用系统的拍照，并把拍摄的图片保存到指定位置。

[java] view plain copy print ?

1. @Override  
2. public void OnSelected(View v, int position) {  
3.     switch (position) {  
4.         case 0:  
5.             // "拍照"按钮被点击了  
6.             mSelectPicturePopupWindow.dismissPopupWindow();  
7.             Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);  
8.             //下面这句指定调用相机拍照后的照片存储的路径  
9.             takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(mTempPhotoPath)));  
10.             startActivityForResult(takeIntent, CAMERA_REQUEST_CODE);  
11.             break;  
12.         case 1:  
13.             // TODO: "从相册选择"按钮被点击了  
14.             break;  
15.         case 2:  
16.             // TODO: "取消"按钮被点击了  
17.             break;  
18.     }  
19. }  

这里的指定位置为sd卡本目录下

[java] view plain copy print ?

1. mTempPhotoPath = Environment.getExternalStorageDirectory() + File.separator + "photo.jpeg";  

当拍摄照片完成时会回调到onActivityResult，我们在这里处理图片的裁剪就可以了。

[java] view plain copy print ?

1. @Override  
2. public void onActivityResult(int requestCode, int resultCode, Intent data) {  
3.     if (resultCode == mActivity.RESULT_OK) {  
4.         switch (requestCode) {  
5.             case CAMERA_REQUEST_CODE:     
6.                 // TODO: 调用相机拍照  
7.                 break;  
8.         }  
9.     }  
10.     super.onActivityResult(requestCode, resultCode, data);  
11. }  

七、相册选择图片

调用系统的选择图片

[java] view plain copy print ?

1. @Override  
2. public void OnSelected(View v, int position) {  
3.     switch (position) {  
4.         case 0:  
5.             // "拍照"按钮被点击了  
6.             mSelectPicturePopupWindow.dismissPopupWindow();  
7.             Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);  
8.             // 下面这句指定调用相机拍照后的照片存储的路径  
9.             takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(mTempPhotoPath)));  
10.             startActivityForResult(takeIntent, CAMERA_REQUEST_CODE);  
11.             break;  
12.         case 1:  
13.             // "从相册选择"按钮被点击了  
14.             mSelectPicturePopupWindow.dismissPopupWindow();  
15.             Intent pickIntent = new Intent(Intent.ACTION_PICK, null);  
16.             // 如果限制上传到服务器的图片类型时可以直接写如："image/jpeg 、 image/png等的类型"  
17.             pickIntent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");  
18.             startActivityForResult(pickIntent, GALLERY_REQUEST_CODE);  
19.             break;  
20.         case 2:  
21.            // TODO: "取消"按钮被点击了  
22.             break;  
23.     }  
24. }  

当拍选择图片完成时会回调到onActivityResult，在这里处理选择的返回结果。

[java] view plain copy print ?

1. @Override  
2. public void onActivityResult(int requestCode, int resultCode, Intent data) {  
3.     if (resultCode == mActivity.RESULT_OK) {  
4.         switch (requestCode) {  
5.             case CAMERA_REQUEST_CODE:  
6.                 // TODO: 调用相机拍照  
7.                 break;  
8.             case GALLERY_REQUEST_CODE:  
9.                 // TODO: 直接从相册获取  
10.                 break;  
11.         }  
12.     }  
13.     super.onActivityResult(requestCode, resultCode, data);  
14. }  

八、使用Crop裁剪图片

    裁剪图片，这里设置宽高比为1:1，最大尺寸为512*512，当然可以根据自己的需求来设置。

[java] view plain copy print ?

1. /** 
2.  * 裁剪图片方法实现 
3.  * 
4.  * @param uri 
5.  */  
6. public void startCropActivity(Uri uri) {  
7.     UCrop.of(uri, mDestinationUri)  
8.             .withAspectRatio(1, 1)  
9.             .withMaxResultSize(512, 512)  
10.             .withTargetActivity(CropActivity.class)  
11.             .start(mActivity, this);  
12. }  

CropActiivty裁剪完成时会回调到onActivityResult，在这里处理选择的返回结果。

[java] view plain copy print ?

1. @Override  
2. public void onActivityResult(int requestCode, int resultCode, Intent data) {  
3.     if (resultCode == mActivity.RESULT_OK) {  
4.         switch (requestCode) {  
5.             case CAMERA_REQUEST_CODE:   // 调用相机拍照  
6.                 File temp = new File(mTempPhotoPath);  
7.                 startCropActivity(Uri.fromFile(temp));  
8.                 break;  
9.             case GALLERY_REQUEST_CODE:  // 直接从相册获取  
10.                 startCropActivity(data.getData());  
11.                 break;  
12.             case UCrop.REQUEST_CROP:   
13.                 // TODO: 裁剪图片结果  
14.                 break;  
15.             case UCrop.RESULT_ERROR:  
16.                 // TODO: 裁剪图片错误  
17.                 break;  
18.         }  
19.     }  
20.     super.onActivityResult(requestCode, resultCode, data);  
21. }  

CropActivity的界面如下所示：

   

    

    当然也可以轻松设计成如下两图：

     

    

1. XML布局

[html] view plain copy print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:fab="http://schemas.android.com/apk/res-auto"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:clipToPadding="true"  
6.     android:fitsSystemWindows="true">  
7.   
8.     <include layout="@layout/toolbar_layout" />  
9.   
10.     <FrameLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="match_parent"  
13.         android:layout_below="@+id/toolbar"  
14.         android:background="#000">  
15.   
16.         <com.kevin.crop.view.UCropView  
17.             android:id="@+id/weixin_act_ucrop"  
18.             android:layout_width="match_parent"  
19.             android:layout_height="match_parent"  
20.             android:visibility="invisible" />  
21.   
22.     </FrameLayout>  
23.   
24.     <android.support.design.widget.CoordinatorLayout  
25.         android:layout_width="match_parent"  
26.         android:layout_height="match_parent">  
27.   
28.         <android.support.design.widget.FloatingActionButton  
29.             android:id="@+id/crop_act_save_fab"  
30.             android:layout_width="wrap_content"  
31.             android:layout_height="wrap_content"  
32.             android:layout_gravity="bottom|right"  
33.             android:layout_margin="@dimen/fab_margin"  
34.             android:src="@mipmap/ic_done_white"  
35.             fab:fabSize="normal" />  
36.     </android.support.design.widget.CoordinatorLayout>  
37.   
38.   
39. </RelativeLayout>  

    可以发现非常简单，只有一个主要的CropView，这就是uCrop框架为我们提供的。

2. 代码编写

[java] view plain copy print ?

1. @Override  
2. protected void initViews() {  
3.     initToolBar();  
4.   
5.     mGestureCropImageView = mUCropView.getCropImageView();  
6.     mOverlayView = mUCropView.getOverlayView();  
7.   
8.     // 设置允许缩放  
9.     mGestureCropImageView.setScaleEnabled(true);  
10.     // 设置禁止旋转  
11.     mGestureCropImageView.setRotateEnabled(false);  
12.     // 设置外部阴影颜色  
13.     mOverlayView.setDimmedColor(Color.parseColor("#AA000000"));  
14.     // 设置周围阴影是否为椭圆(如果false则为矩形)  
15.     mOverlayView.setOvalDimmedLayer(false);  
16.     // 设置显示裁剪边框  
17.     mOverlayView.setShowCropFrame(true);  
18.     // 设置不显示裁剪网格  
19.     mOverlayView.setShowCropGrid(false);  
20.   
21.     final Intent intent = getIntent();  
22.     setImageData(intent);  
23. }  

[java] view plain copy print ?

1. private void setImageData(Intent intent) {  
2.     Uri inputUri = intent.getParcelableExtra(UCrop.EXTRA_INPUT_URI);  
3.     mOutputUri = intent.getParcelableExtra(UCrop.EXTRA_OUTPUT_URI);  
4.   
5.     if (inputUri != null && mOutputUri != null) {  
6.         try {  
7.             mGestureCropImageView.setImageUri(inputUri);  
8.         } catch (Exception e) {  
9.             setResultException(e);  
10.             finish();  
11.         }  
12.     } else {  
13.         setResultException(new NullPointerException("Both input and output Uri must be specified"));  
14.         finish();  
15.     }  
16.   
17.     // 设置裁剪宽高比  
18.     if (intent.getBooleanExtra(UCrop.EXTRA_ASPECT_RATIO_SET, false)) {  
19.         float aspectRatioX = intent.getFloatExtra(UCrop.EXTRA_ASPECT_RATIO_X, 0);  
20.         float aspectRatioY = intent.getFloatExtra(UCrop.EXTRA_ASPECT_RATIO_Y, 0);  
21.   
22.         if (aspectRatioX > 0 && aspectRatioY > 0) {  
23.             mGestureCropImageView.setTargetAspectRatio(aspectRatioX / aspectRatioY);  
24.         } else {  
25.             mGestureCropImageView.setTargetAspectRatio(CropImageView.SOURCE_IMAGE_ASPECT_RATIO);  
26.         }  
27.     }  
28.   
29.     // 设置裁剪的最大宽高  
30.     if (intent.getBooleanExtra(UCrop.EXTRA_MAX_SIZE_SET, false)) {  
31.         int maxSizeX = intent.getIntExtra(UCrop.EXTRA_MAX_SIZE_X, 0);  
32.         int maxSizeY = intent.getIntExtra(UCrop.EXTRA_MAX_SIZE_Y, 0);  
33.   
34.         if (maxSizeX > 0 && maxSizeY > 0) {  
35.             mGestureCropImageView.setMaxResultImageSizeX(maxSizeX);  
36.             mGestureCropImageView.setMaxResultImageSizeY(maxSizeY);  
37.         } else {  
38.             Log.w(TAG, "EXTRA_MAX_SIZE_X and EXTRA_MAX_SIZE_Y must be greater than 0");  
39.         }  
40.     }  
41. }  

以上为CropView的配置，更多配置请参考项目源码。

最重要的，裁剪保存图片：

[java] view plain copy print ?

1. private void cropAndSaveImage() {  
2.     OutputStream outputStream = null;  
3.     try {  
4.         final Bitmap croppedBitmap = mGestureCropImageView.cropImage();  
5.         if (croppedBitmap != null) {  
6.             outputStream = getContentResolver().openOutputStream(mOutputUri);  
7.             croppedBitmap.compress(Bitmap.CompressFormat.JPEG, 85, outputStream);  
8.             croppedBitmap.recycle();  
9.   
10.             setResultUri(mOutputUri, mGestureCropImageView.getTargetAspectRatio());  
11.             finish();  
12.         } else {  
13.             setResultException(new NullPointerException("CropImageView.cropImage() returned null."));  
14.         }  
15.     } catch (Exception e) {  
16.         setResultException(e);  
17.         finish();  
18.     } finally {  
19.         BitmapLoadUtils.close(outputStream);  
20.     }  
21. }  

PictureSelectFragment处理裁剪成功的返回值

[java] view plain copy print ?

1. /** 
2.  * 处理剪切成功的返回值 
3.  * 
4.  * @param result 
5.  */  
6. private void handleCropResult(Intent result) {  
7.     deleteTempPhotoFile();  
8.     final Uri resultUri = UCrop.getOutput(result);  
9.     if (null != resultUri && null != mOnPictureSelectedListener) {  
10.         Bitmap bitmap = null;  
11.         try {  
12.             bitmap = MediaStore.Images.Media.getBitmap(mActivity.getContentResolver(), resultUri);  
13.         } catch (FileNotFoundException e) {  
14.             e.printStackTrace();  
15.         } catch (IOException e) {  
16.             e.printStackTrace();  
17.         }  
18.         mOnPictureSelectedListener.onPictureSelected(resultUri, bitmap);  
19.     } else {  
20.         Toast.makeText(mContext, "无法剪切选择图片", Toast.LENGTH_SHORT).show();  
21.     }  
22. }  

处理裁剪失败的返回值

[java] view plain copy print ?

1. /** 
2.  * 处理剪切失败的返回值 
3.  * 
4.  * @param result 
5.  */  
6. private void handleCropError(Intent result) {  
7.     deleteTempPhotoFile();  
8.     final Throwable cropError = UCrop.getError(result);  
9.     if (cropError != null) {  
10.         Log.e(TAG, "handleCropError: ", cropError);  
11.         Toast.makeText(mContext, cropError.getMessage(), Toast.LENGTH_LONG).show();  
12.     } else {  
13.         Toast.makeText(mContext, "无法剪切选择图片", Toast.LENGTH_SHORT).show();  
14.     }  
15. }  

这里设置了选择的回调接口，便于封装抽取。

[java] view plain copy print ?

1. /** 
2.  * 图片选择的回调接口 
3.  */  
4. public interface OnPictureSelectedListener {  
5.     /** 
6.      * 图片选择的监听回调 
7.      * 
8.      * @param fileUri 
9.      * @param bitmap 
10.      */  
11.     void onPictureSelected(Uri fileUri, Bitmap bitmap);  
12. }  

经过五、六、七步骤，我们的PictureSelectFragment就搞定了，在使用的时候只要继承它，几行代码就搞定了。

九、PictureSelectFragment使用

[java] view plain copy print ?

1. // 设置图片点击监听  
2. mPictureIv.setOnClickListener(new View.OnClickListener() {  
3.     @Override  
4.     public void onClick(View v) {  
5.         selectPicture();  
6.     }  
7. });  

[java] view plain copy print ?

1. // 设置裁剪图片结果监听  
2. setOnPictureSelectedListener(new OnPictureSelectedListener() {  
3.     @Override  
4.     public void onPictureSelected(Uri fileUri, Bitmap bitmap) {  
5.         mPictureIv.setImageBitmap(bitmap);  
6.   
7.         String filePath = fileUri.getEncodedPath();  
8.         String imagePath = Uri.decode(filePath);  
9.         Toast.makeText(mContext, "图片已经保存到:" + imagePath, Toast.LENGTH_LONG).show();  
10.     }  
11. });  

OK，经过我们上面的封装及基类抽取，在使用的时候还是非常简单的。

十、下载传送门

    源码及示例

    用到的Android-Crop库

十一、结语

    该篇主要讲解了在Android客户端如何裁剪拍照及选择的图片，下篇《Android 上传图片到JavaWeb服务器》将详细说明Android端是如何上传图片到JavaWeb服务器。