Android實現(xiàn)拍照、選擇圖片并裁剪圖片功能
更新時間：2022年05月18日 11:40:28 作者：周文凱
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)拍照、選擇圖片并裁剪圖片功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、 實現(xiàn)拍照、選擇圖片并裁剪圖片效果
按照之前博客的風(fēng)格，首先看下實現(xiàn)效果。
二、 uCrop項目應(yīng)用
想起之前看到的Yalantis/uCrop效果比較絢，但是研究源碼之后發(fā)現(xiàn)在定制界面方面還是有一點的限制，于是在它的基礎(chǔ)上做了修改Android-Crop，把定制界面獨立出來，讓用戶去自由設(shè)置。下圖為使用Android-Crop實現(xiàn)的模仿微信選擇圖片并裁剪Demo。
三、 實現(xiàn)思路
比較簡單的選擇設(shè)備圖片裁剪，并將裁剪后的圖片保存到指定路徑；
調(diào)用系統(tǒng)拍照，將拍照圖片保存在SD卡，然后裁剪圖片并將裁剪后的圖片保存在指定路徑。
流程圖如下所示：
四、 選擇框?qū)崿F(xiàn)
這里通過PopupWindow來實現(xiàn)，當(dāng)然也可以根據(jù)需求采用其他方式實現(xiàn)。實現(xiàn)效果如下圖所示：
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. 代碼編寫
public SelectPicturePopupWindow(Context context) {
super(context);
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
mMenuView = inflater.inflate(R.layout.layout_picture_selector, null);
takePhotoBtn = (Button) mMenuView.findViewById(R.id.picture_selector_take_photo_btn);
pickPictureBtn = (Button) mMenuView.findViewById(R.id.picture_selector_pick_picture_btn);
cancelBtn = (Button) mMenuView.findViewById(R.id.picture_selector_cancel_btn);
// 設(shè)置按鈕監(jiān)聽
takePhotoBtn.setOnClickListener(this);
pickPictureBtn.setOnClickListener(this);
cancelBtn.setOnClickListener(this);
} 創(chuàng)建SelectPicturePopupWindow的時候設(shè)置按鈕的監(jiān)聽。這里編寫一個選擇監(jiān)聽接口：
/**
* 選擇監(jiān)聽接口
*/
public interface OnSelectedListener {
void OnSelected(View v, int position);
}
回調(diào)的參數(shù)為點擊的按鈕View以及當(dāng)前按鈕的索引，那么只要在選擇監(jiān)聽里面返回接口的回調(diào)就可以啦。
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.picture_selector_take_photo_btn:
if(null != mOnSelectedListener) {
mOnSelectedListener.OnSelected(v, 0);
}
break;
case R.id.picture_selector_pick_picture_btn:
if(null != mOnSelectedListener) {
mOnSelectedListener.OnSelected(v, 1);
}
break;
case R.id.picture_selector_cancel_btn:
if(null != mOnSelectedListener) {
mOnSelectedListener.OnSelected(v, 2);
}
break;
}
}
PopupWindow的初始化創(chuàng)建、監(jiān)聽設(shè)置好之后，只要提供顯示與隱藏兩個方法就可以了。
/**
* 把一個View控件添加到PopupWindow上并且顯示
*
* @param activity
*/
public void showPopupWindow(Activity activity) {
popupWindow = new PopupWindow(mMenuView, // 添加到popupWindow
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
popupWindow.showAtLocation(activity.getWindow().getDecorView(), Gravity.CENTER | Gravity.BOTTOM, 0, 0);
popupWindow.setAnimationStyle(android.R.style.Animation_InputMethod); // 設(shè)置窗口顯示的動畫效果
popupWindow.setFocusable(false); // 點擊其他地方隱藏鍵盤 popupWindow
popupWindow.update();
}
/**
* 移除PopupWindow
*/
public void dismissPopupWindow() {
if (popupWindow != null && popupWindow.isShowing()) {
popupWindow.dismiss();
popupWindow = null;
}
}OK，到這里選擇框的實現(xiàn)就完成了。
五、使用選擇框
通過我們上面對選擇框的封裝，使用起來就比較簡單了，只需要初始化及設(shè)置選擇的監(jiān)聽就可以啦。
1.初始化選擇框
mSelectPicturePopupWindow = new SelectPicturePopupWindow(mContext); mSelectPicturePopupWindow.setOnSelectedListener(this);
2.設(shè)置選擇框監(jiān)聽
@Override
public void OnSelected(View v, int position) {
switch (position) {
case 0:
// TODO: "拍照"按鈕被點擊了
break;
case 1:
// TODO: "從相冊選擇"按鈕被點擊了
break;
case 2:
// TODO: "取消"按鈕被點擊了
break;
}
}
然后在Fragment上進(jìn)行封裝，我們?nèi)∶麨镻ictureSelectFragment。
六、拍照并保存圖片
調(diào)用系統(tǒng)的拍照，并把拍攝的圖片保存到指定位置。
@Override
public void OnSelected(View v, int position) {
switch (position) {
case 0:
// "拍照"按鈕被點擊了
mSelectPicturePopupWindow.dismissPopupWindow();
Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
//下面這句指定調(diào)用相機拍照后的照片存儲的路徑
takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(mTempPhotoPath)));
startActivityForResult(takeIntent, CAMERA_REQUEST_CODE);
break;
case 1:
// TODO: "從相冊選擇"按鈕被點擊了
break;
case 2:
// TODO: "取消"按鈕被點擊了
break;
}
}
這里的指定位置為sd卡本目錄下
mTempPhotoPath = Environment.getExternalStorageDirectory() + File.separator + "photo.jpeg";
當(dāng)拍攝照片完成時會回調(diào)到onActivityResult，我們在這里處理圖片的裁剪就可以了。
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == mActivity.RESULT_OK) {
switch (requestCode) {
case CAMERA_REQUEST_CODE:
// TODO: 調(diào)用相機拍照
break;
}
}
super.onActivityResult(requestCode, resultCode, data);
}
七、相冊選擇圖片
調(diào)用系統(tǒng)的選擇圖片
@Override
public void OnSelected(View v, int position) {
switch (position) {
case 0:
// "拍照"按鈕被點擊了
mSelectPicturePopupWindow.dismissPopupWindow();
Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
// 下面這句指定調(diào)用相機拍照后的照片存儲的路徑
takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(mTempPhotoPath)));
startActivityForResult(takeIntent, CAMERA_REQUEST_CODE);
break;
case 1:
// "從相冊選擇"按鈕被點擊了
mSelectPicturePopupWindow.dismissPopupWindow();
Intent pickIntent = new Intent(Intent.ACTION_PICK, null);
// 如果限制上傳到服務(wù)器的圖片類型時可以直接寫如："image/jpeg 、 image/png等的類型"
pickIntent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
startActivityForResult(pickIntent, GALLERY_REQUEST_CODE);
break;
case 2:
// TODO: "取消"按鈕被點擊了
break;
}
}
當(dāng)拍選擇圖片完成時會回調(diào)到onActivityResult，在這里處理選擇的返回結(jié)果。
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == mActivity.RESULT_OK) {
switch (requestCode) {
case CAMERA_REQUEST_CODE:
// TODO: 調(diào)用相機拍照
break;
case GALLERY_REQUEST_CODE:
// TODO: 直接從相冊獲取
break;
}
}
super.onActivityResult(requestCode, resultCode, data);
}
八、使用Crop裁剪圖片
裁剪圖片，這里設(shè)置寬高比為1:1，最大尺寸為512*512，當(dāng)然可以根據(jù)自己的需求來設(shè)置。
/**
* 裁剪圖片方法實現(xiàn)
*
* @param uri
*/
public void startCropActivity(Uri uri) {
UCrop.of(uri, mDestinationUri)
.withAspectRatio(1, 1)
.withMaxResultSize(512, 512)
.withTargetActivity(CropActivity.class)
.start(mActivity, this);
}
CropActiivty裁剪完成時會回調(diào)到onActivityResult，在這里處理選擇的返回結(jié)果。
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == mActivity.RESULT_OK) {
switch (requestCode) {
case CAMERA_REQUEST_CODE: // 調(diào)用相機拍照
File temp = new File(mTempPhotoPath);
startCropActivity(Uri.fromFile(temp));
break;
case GALLERY_REQUEST_CODE: // 直接從相冊獲取
startCropActivity(data.getData());
break;
case UCrop.REQUEST_CROP:
// TODO: 裁剪圖片結(jié)果
break;
case UCrop.RESULT_ERROR:
// TODO: 裁剪圖片錯誤
break;
}
}
super.onActivityResult(requestCode, resultCode, data);
}
CropActivity的界面如下所示：
當(dāng)然也可以輕松設(shè)計成如下兩圖：
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>
可以發(fā)現(xiàn)非常簡單，只有一個主要的CropView，這就是uCrop框架為我們提供的。
2. 代碼編寫
@Override
protected void initViews() {
initToolBar();
mGestureCropImageView = mUCropView.getCropImageView();
mOverlayView = mUCropView.getOverlayView();
// 設(shè)置允許縮放
mGestureCropImageView.setScaleEnabled(true);
// 設(shè)置禁止旋轉(zhuǎn)
mGestureCropImageView.setRotateEnabled(false);
// 設(shè)置外部陰影顏色
mOverlayView.setDimmedColor(Color.parseColor("#AA000000"));
// 設(shè)置周圍陰影是否為橢圓(如果false則為矩形)
mOverlayView.setOvalDimmedLayer(false);
// 設(shè)置顯示裁剪邊框
mOverlayView.setShowCropFrame(true);
// 設(shè)置不顯示裁剪網(wǎng)格
mOverlayView.setShowCropGrid(false);
final Intent intent = getIntent();
setImageData(intent);
}
private void setImageData(Intent intent) {
Uri inputUri = intent.getParcelableExtra(UCrop.EXTRA_INPUT_URI);
mOutputUri = intent.getParcelableExtra(UCrop.EXTRA_OUTPUT_URI);
if (inputUri != null && mOutputUri != null) {
try {
mGestureCropImageView.setImageUri(inputUri);
} catch (Exception e) {
setResultException(e);
finish();
}
} else {
setResultException(new NullPointerException("Both input and output Uri must be specified"));
finish();
}
// 設(shè)置裁剪寬高比
if (intent.getBooleanExtra(UCrop.EXTRA_ASPECT_RATIO_SET, false)) {
float aspectRatioX = intent.getFloatExtra(UCrop.EXTRA_ASPECT_RATIO_X, 0);
float aspectRatioY = intent.getFloatExtra(UCrop.EXTRA_ASPECT_RATIO_Y, 0);
if (aspectRatioX > 0 && aspectRatioY > 0) {
mGestureCropImageView.setTargetAspectRatio(aspectRatioX / aspectRatioY);
} else {
mGestureCropImageView.setTargetAspectRatio(CropImageView.SOURCE_IMAGE_ASPECT_RATIO);
}
}
// 設(shè)置裁剪的最大寬高
if (intent.getBooleanExtra(UCrop.EXTRA_MAX_SIZE_SET, false)) {
int maxSizeX = intent.getIntExtra(UCrop.EXTRA_MAX_SIZE_X, 0);
int maxSizeY = intent.getIntExtra(UCrop.EXTRA_MAX_SIZE_Y, 0);
if (maxSizeX > 0 && maxSizeY > 0) {
mGestureCropImageView.setMaxResultImageSizeX(maxSizeX);
mGestureCropImageView.setMaxResultImageSizeY(maxSizeY);
} else {
Log.w(TAG, "EXTRA_MAX_SIZE_X and EXTRA_MAX_SIZE_Y must be greater than 0");
}
}
}
以上為CropView的配置，更多配置請參考項目源碼。
最重要的，裁剪保存圖片：
private void cropAndSaveImage() {
OutputStream outputStream = null;
try {
final Bitmap croppedBitmap = mGestureCropImageView.cropImage();
if (croppedBitmap != null) {
outputStream = getContentResolver().openOutputStream(mOutputUri);
croppedBitmap.compress(Bitmap.CompressFormat.JPEG, 85, outputStream);
croppedBitmap.recycle();
setResultUri(mOutputUri, mGestureCropImageView.getTargetAspectRatio());
finish();
} else {
setResultException(new NullPointerException("CropImageView.cropImage() returned null."));
}
} catch (Exception e) {
setResultException(e);
finish();
} finally {
BitmapLoadUtils.close(outputStream);
}
}
PictureSelectFragment處理裁剪成功的返回值
/**
* 處理剪切成功的返回值
*
* @param result
*/
private void handleCropResult(Intent result) {
deleteTempPhotoFile();
final Uri resultUri = UCrop.getOutput(result);
if (null != resultUri && null != mOnPictureSelectedListener) {
Bitmap bitmap = null;
try {
bitmap = MediaStore.Images.Media.getBitmap(mActivity.getContentResolver(), resultUri);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
mOnPictureSelectedListener.onPictureSelected(resultUri, bitmap);
} else {
Toast.makeText(mContext, "無法剪切選擇圖片", Toast.LENGTH_SHORT).show();
}
}
處理裁剪失敗的返回值
/**
* 處理剪切失敗的返回值
*
* @param result
*/
private void handleCropError(Intent result) {
deleteTempPhotoFile();
final Throwable cropError = UCrop.getError(result);
if (cropError != null) {
Log.e(TAG, "handleCropError: ", cropError);
Toast.makeText(mContext, cropError.getMessage(), Toast.LENGTH_LONG).show();
} else {
Toast.makeText(mContext, "無法剪切選擇圖片", Toast.LENGTH_SHORT).show();
}
}
這里設(shè)置了選擇的回調(diào)接口，便于封裝抽取。
/**
* 圖片選擇的回調(diào)接口
*/
public interface OnPictureSelectedListener {
/**
* 圖片選擇的監(jiān)聽回調(diào)
*
* @param fileUri
* @param bitmap
*/
void onPictureSelected(Uri fileUri, Bitmap bitmap);
}
經(jīng)過五、六、七步驟，我們的PictureSelectFragment就搞定了，在使用的時候只要繼承它，幾行代碼就搞定了。
九、PictureSelectFragment使用
// 設(shè)置圖片點擊監(jiān)聽
mPictureIv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
selectPicture();
}
});
// 設(shè)置裁剪圖片結(jié)果監(jiān)聽
setOnPictureSelectedListener(new OnPictureSelectedListener() {
@Override
public void onPictureSelected(Uri fileUri, Bitmap bitmap) {
mPictureIv.setImageBitmap(bitmap);
String filePath = fileUri.getEncodedPath();
String imagePath = Uri.decode(filePath);
Toast.makeText(mContext, "圖片已經(jīng)保存到:" + imagePath, Toast.LENGTH_LONG).show();
}
});
OK，經(jīng)過我們上面的封裝及基類抽取，在使用的時候還是非常簡單的。
十、下載
更多內(nèi)容大家可以參考專題《Android圖片處理》進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)Android軟件編程有所幫助。
您可能感興趣的文章:
- Android裁剪圖片為圓形圖片的實現(xiàn)原理與代碼
- 解決Android從相冊中獲取圖片出錯圖片卻無法裁剪問題的方法
- Android實現(xiàn)從本地圖庫/相機拍照后裁剪圖片并設(shè)置頭像
- Android 7.0中拍照和圖片裁剪適配的問題詳解
- Android實現(xiàn)拍照及圖片裁剪（6.0以上權(quán)限處理及7.0以上文件管理）
- Android編程實現(xiàn)調(diào)用系統(tǒng)圖庫與裁剪圖片功能
- android文件上傳示例分享(android圖片上傳)
- Android使用post方式上傳圖片到服務(wù)器的方法
- Android實現(xiàn)本地上傳圖片并設(shè)置為圓形頭像
- Android實現(xiàn)圖片裁剪和上傳
相關(guān)文章
這篇文章主要介紹了Android 靜默安裝，安裝后重新啟動APP的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Android控件View的文字周圍添加圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細(xì)介紹了Android 仿京東金融首頁頭像效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要為大家詳細(xì)介紹了安卓版微信小程序跳一跳輔助，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了Android自定義控件之仿優(yōu)酷菜單的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了Android制作一個錨點定位的ScrollView，幫助大家更好的理解和學(xué)習(xí)使用Android，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了Android?Gradle模塊依賴替換使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Flutter app頁面路由以及路由攔截的實現(xiàn)
本篇介紹了介紹了Flutter如何使用路由來實現(xiàn)頁面的跳轉(zhuǎn)，從而簡化頁面之間的耦合，并可以實現(xiàn)路由攔截。2021-06-06
這篇文章主要介紹了Android自定義wheelview隨機選號效果，利用wheelview實現(xiàn)滾動隨機選擇號碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Android開發(fā)中的ViewModel使用實戰(zhàn)案例
在Android應(yīng)用開發(fā)中,ViewModel作為架構(gòu)組件,重要的功能是管理UI數(shù)據(jù)與生命周期,文章深入分析ViewModel如何感知View的生命周期,以及其核心優(yōu)勢,包括生命周期感知、數(shù)據(jù)持久化和與UI層解耦,幫助開發(fā)者利用ViewModel優(yōu)化應(yīng)用架構(gòu),需要的朋友可以參考下2024-10-10