devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android实现拍照、选择图片并裁剪图片功能_android中调用摄像头拍照并剪裁图片

作者：笔触狂放9 | 2024-08-12 13:57:30

赞

踩

android中调用摄像头拍照并剪裁图片

一、 实现拍照、选择图片并裁剪图片效果

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

    

二、 uCrop项目应用

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

    

三、 实现思路

比较简单的选择设备图片裁剪，并将裁剪后的图片保存到指定路径；

调用系统拍照，将拍照图片保存在SD卡，然后裁剪图片并将裁剪后的图片保存在指定路径。
流程图如下所示：

    
 

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

    

1. XML布局

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:gravity="center_horizontal" 
 android:orientation="vertical"> 
 
 <LinearLayout 
 android:id="@+id/pop_layout" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_alignParentBottom="true" 
 android:background="#444" 
 android:gravity="center_horizontal" 
 android:orientation="vertical"> 
 
 <Button 
 android:id="@+id/picture_selector_take_photo_btn" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="10dip" 
 android:layout_marginRight="10dip" 
 android:layout_marginTop="10dp" 
 android:background="#4d69ff" 
 android:padding="10dp" 
 android:text="拍照" 
 android:textColor="#CEC9E7" 
 android:textSize="18sp" 
 android:textStyle="bold" /> 
 
 <Button 
 android:id="@+id/picture_selector_pick_picture_btn" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginLeft="10dip" 
 android:layout_marginRight="10dip" 
 android:layout_marginTop="5dp" 
 android:background="#4d69ff" 
 android:padding="10dp" 
 android:text="从相册选择" 
 android:textColor="#CEC9E7" 
 android:textSize="18sp" 
 android:textStyle="bold" /> 
 
 <Button 
 android:id="@+id/picture_selector_cancel_btn" 
 android:layout_width="match_parent" 
 android:layout_height="wrap_content" 
 android:layout_marginBottom="15dip" 
 android:layout_marginLeft="10dip" 
 android:layout_marginRight="10dip" 
 android:layout_marginTop="20dp" 
 android:background="@android:color/white" 
 android:padding="10dp" 
 android:text="取消" 
 android:textColor="#373447" 
 android:textSize="18sp" 
 android:textStyle="bold" /> 
 </LinearLayout> 
 
</RelativeLayout>

2. 代码编写

  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的时候设置按钮的监听。这里编写一个选择监听接口：

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

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

  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的初始化创建、监听设置好之后，只要提供显示与隐藏两个方法就可以了。

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

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

五、使用选择框

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

1.初始化选择框

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

2.设置选择框监听

  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。

六、拍照并保存图片

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

  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卡本目录下
mTempPhotoPath = Environment.getExternalStorageDirectory() + File.separator + "photo.jpeg"; 

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

  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. }

七、相册选择图片

调用系统的选择图片

  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，在这里处理选择的返回结果。

  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，当然可以根据自己的需求来设置。

  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，在这里处理选择的返回结果。

  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布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:fab="http://schemas.android.com/apk/res-auto" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:clipToPadding="true" 
 android:fitsSystemWindows="true"> 
 
 <include layout="@layout/toolbar_layout" /> 
 
 <FrameLayout 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" 
 android:layout_below="@+id/toolbar" 
 android:background="#000"> 
 
 <com.kevin.crop.view.UCropView 
  android:id="@+id/weixin_act_ucrop" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:visibility="invisible" /> 
 
 </FrameLayout> 
 
 <android.support.design.widget.CoordinatorLayout 
 android:layout_width="match_parent" 
 android:layout_height="match_parent"> 
 
 <android.support.design.widget.FloatingActionButton 
  android:id="@+id/crop_act_save_fab" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="bottom|right" 
  android:layout_margin="@dimen/fab_margin" 
  android:src="@mipmap/ic_done_white" 
  fab:fabSize="normal" /> 
 </android.support.design.widget.CoordinatorLayout> 
 
 
</RelativeLayout>

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

2. 代码编写

  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. } 
  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. } 
  42.

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

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

  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处理裁剪成功的返回值

  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. }

处理裁剪失败的返回值

  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. }

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

  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使用

  1. // 设置图片点击监听 
  2. mPictureIv.setOnClickListener(new View.OnClickListener() { 
  3.  @Override 
  4.  public void onClick(View v) { 
  5.  selectPicture(); 
  6.  } 
  7. }); 
  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，经过我们上面的封装及基类抽取，在使用的时候还是非常简单的。

源码：https://github.com/xuehuayous/Android-ImageCrop

源码： https://github.com/xuehuayous/Android-ImageCrop
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/970123
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号