开发者

Android实现图片裁剪处理的操作步骤

目录
  • 前言
  • 步骤 1: 设置权限
  • 步骤 2: 创建布局文件
  • 步骤 3: 实现自定义View CustomCropImageView
    • CustomCropImageView.Java
  • 步骤 4: 更新Activity逻辑
    • MainActivity.java
  • 总结

    前言

    本文将介绍如何构建一个支持图片选择、裁剪(包括手动缩放和旋转)、以及保存到自定义路径的android应用demo。

    步骤 1: 设置权限

    首先,在AndroidManifest.XML中添加必要的权限:

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    

    对于 Android 6.0 (API level 23) 及以上版本,需要在运行时请求权限。

    步骤 2: 创建布局文件

    创建一个简单的布局文件activity_main.xml,包含一个用于显示图片的CustomCropImageView,以及几个按钮用于控制裁剪操作。

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.example.CustomCropImageView
            android:id="@+id/customCropImageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <Button
            android:id="@+id/buttonPickImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pick Image"
            android:layout_below="@id/customCropImageView" />
    
        <Button
            android:id="@+id/buttonCrop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Crop"
            android:layout_toEndOf="@id/buttonPickImage"
            android:layout_below="@id/customCropImageView" />
    
        <Button
            android:id="@+id/buttonCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Cancel"
            android:layout_toEndOf="@id/buttonCrop"
            android:layout_below="@id/customCropImageView" />
    
        <Button
            android:id="@+id/buttonSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Save"
            android:layout_toEndOf="@id/buttonCancel"
            android:layout_below="@id/customCropImageView" />
    </RelativeLayout>
    

    步骤 3: 实现自定义View CustomCropImageView

    接下来,我们将详细实现CustomCropImageView,这个自定义视图负责所有与裁剪相关的交互逻辑。

    CustomCropImageView.java

    ```java
    import android.content.Context;
    import android.graphics.Bitmap;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Matrix;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.graphics.PorterDuff;
    import android.graphics.PorterDuffXfermode;
    import android.graphics.RectF;
    import android.util.AttributeSet;
    import android.view.GestureDetector;
    import android.view.MotionEvent;
    import android.view.ScaleGestureDetector;
    import android.widget.FrameLayout;
    
    public class CustomCropImageView extends FrameLayout {
    
        // 成员变量定义
        private Bitmap mBitmap; // 要裁剪的图片
        private Matrix mMatrix = new Matrix(); // 用于变换(缩放、旋转)图像的矩阵
        private RectF mRect = new RectF(); // 定义裁剪框的位置和大小
        private float[] mLastTouchPos = new float[2]; // 上次触摸位置,用于计算移动距离
        jsprivate float[] mCurrentPos = new float[2]; // 当前触摸位置,用于更新图像位置
        private float mRotation = 0f; // 图像的旋转角度
        private boolean mIsDragging = false; // 标记是否正在拖动图像
        private ScaleGestureDetector mScaleDetector; // 检测多点触控缩放手势
        private GestureDetector mGestureDetector; // 检测单点触控手势(如点击)
    
        // 构造函数,初始化自定义视图
        public CustomCropImageView(Context context, AttributeSet attrs) {
            super(context, attrs);
            // 初始化手势检测器
            mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
         php   mGestureDetector = new GestureDetector(context, new GestureListener());
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    
            if (mBitmap != null) {
                // 绘制背景蒙层,使非裁剪区域变暗
                drawOverlay(canvas);
    
                // 保存当前Canvas状态,以便稍后恢复
                canvas.save();
                // 将Canvas原点移动到裁剪框中心,进行旋转操作
                canvas.translate(mRect.centerX(), mRect.centerY());
                canvas.rotate(mRotation);
                // 移回原点以绘制旋转后的图像
                canvas.translate(-mRect.centerX(), -mRect.centerY());
                // 使用变换矩阵绘制图像
                canvas.drawBitmap(mBitmap, mMatrix, null);
                // 恢复Canvas到之前的状态
                canvas.restore();
    
                // 绘制裁剪框,让用户知道哪里会被裁剪
                drawCropBox(canvas);
            }
        }
    
        private void drawOverlay(Canvas canvas) {
            Paint paint = new Paint();
            // 设置半透明黑色作为蒙层颜色
            paint.setColor(Color.argb(128, 0, 0, 0));
            // 填充整个视图为半透明黑色
            canvas.drawRect(0, 0, getWidth(), getHeight(), paint);
    
            // 创建一个路径,添加裁剪框形状
            Path path = new Path();
            path.addRect(mRect, Path.Direction.CW);
            // 使用canvas.clipPath剪切出裁剪框区域,使其透明
            // 注意:Region.Op.DIFFERENCE在API 26以上已被弃用,应考虑使用其他方式实现相同效果
            canvas.clipPath(path, Region.Op.DIFFERENCE);
            canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
        }
    
        private void drawCropBox(Canvas canvas) {
            Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // 抗锯齿
            paint.setStyle(Paint.Style.STROKE); // 只绘制边框,不填充内部
            paint.setStrokeWidth(5); // 边框宽度
            paint.setColor(Color.BLUE); // 裁剪框颜色设置为蓝色
            // 绘制裁剪框矩形
            canvas.drawRect(mRect, paint);
        }
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            // 分别将事件传递给缩放和手势检测器
            mScaleDetector.onTouchEvent(event);
            mGestureDetector.onTouchEvent(event);
    
            switch (event.getAction()) {
                case MotionEvent.ACTIONjavascript_DOWN:
                    // 记录按下时的坐标,开始拖动
                    mLastTouchPos[0] = event.getX();
                    mLastTouchPos[1] = event.getY();
                    mIsDragging = true;
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (mIsDragging) {
                        // 更新当前位置,并根据位移调整矩阵和平移裁剪框
                        mCurrentPos[0] = event.getX();
                        mCurrentPos[1] = event.getY();
                        updateMatrix();
                        invalidate(); // 请求重新绘制界面
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    // 结束拖动
                    mIsDragging = false;
                    break;
            }
            return true;
        }
    
        private void updateMatrix() {
            // 更新矩阵以反映图像的新位置
            mMatrix.setTranslate(mCurrentPos[0] - mLastTouchPos[0], mCurrentPos[1] - mLastTouchPos[1]);
            // 同步裁剪框的位置
            mRect.offset(mCurrentPos[0] - mLastTouchPos[0], mCurrentPos[1] - mLastTouchPos[1]);
        }
    
        private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
            @Override
            public boolean onScale(ScaleGestureDetector detector) {
                // 获取缩放因子并应用到矩阵上,保持缩放中心点不变
                float scaleFactor = detector.getScaleFactor();
                mMatrix.postScale(scaleFactor, scaleFactor, detector.getFocusX(), detector.getFocusY());
                invalidate(); // 请求重绘以反映变化
                return true;
            }
        }
    
        private class GestureListener extends Gesture编程客栈Detector.SimpleOnGestureListener {
            @Override
            public boolean onDoubleTap(MotionEvent e) {
                // 双击时重置所有变换
                resetTransformations();
                return true;
            }
        }
    
        private void resetTransformations() {
            // 重置矩阵和旋转角度,以及裁剪框位置
            mMatrix.reset();
            mRotation = 0f;
            mRect.set(/* default values */);
            invalidate(); // 请求重绘
        }
    
        // 设置要裁剪的图片
        public void setImageBitmap(Bitmap bitmap) {
            mBitmap = bitmap;
            // 根据新图片尺寸调整裁剪框大小
            updateCropBoxSize();
            requestLayout(); // 请求布局更新
            invalidate(); // 请求重绘
        }
    
        private void updateCropBoxSize() {
            // 根据所选图片的尺寸设置合适的裁剪框大小
            int width = mBitmap.getWidth();
            int height = mBitmap.getHeight();
            float ASPectRatio = (float) width / height;
    
            // 设定裁剪框的初始尺寸为图片的中心区域,同时确保其宽高比与原始图片一致
            float rectWidth = Math.min(getWidth(), getHeight() * aspectRatio);
            float rectHeight = Math.min(getHeight(), getWidth() / aspectRatio);
            mRect.set((getWidth() - rectWidth) / 2, (getHeight() - rectHeight) / 2, (getWidth() + rectWidth) / 2, (getHeight() + rectHeight) / 2);
        }
    
        // 获取裁剪后的图片
        public Bitmap getCroppedBitmap() {
            // 创建一个新的位图来容纳裁剪结果
            Bitmap croppedBitmap = Bitmap.createBitmap(
                (int)mRect.width(),
                (int)mRect.height(),
                Bitmap.Config.ARGB_8888
            );
            Canvas canvas = new Canvas(croppedBitmap);
            // 平移画布以对齐裁剪框左上角
            canvas.translate(-mRect.left, -mRect.top);
            // 绘制变换后的原始图片到新的位图中
            canvas.drawBitmap(mBitmap, mMatrix, null);
            return croppedBitmap;
        }
    }
    

    自定义的CustomCropImageView,它允许用户通过触摸屏交互来裁剪图片。该视图支持基本的手势操作,包括拖动、缩放和双击重置。此外,还提供了设置图片和获取裁剪后图片的方法。

    步骤 4: 更新Activity逻辑

    现在我们将更新MainActivity.java,以加载图片到自定义视图,并处理裁剪后的保存逻辑。

    MainActivity.java

    import android.Manifest;
    import android.content.Intent;
    import android.content.pm.PackageManager;
    import android.graphics.Bitmap;
    import android.net.Uri;
    import android.os.Bundle;
    import android.provider.MediaStore;
    import androidx.annotation.NonNull;
    import androidx.annotation.Nullable;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.core.app.ActivityCompat;
    import androidx.core.content.ContextCompat;
    
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.IOException;
    
    public class MainActivity extends AppCompatActivity {
    
        private static final int PICK_IMAGE_REQUEST = 1;
        private static final int REQUEST_PERMISSIONS = 2;
        private CustomCropImageView customCropImageView;
        private Uri imageUri;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            customCropImageView = findViewById(R.id.customCropImageView);
    
            // 检查并请求存储权限
            if (ContextCompat.checkSelfPermission(this, Manifest.permission.WRITE_EXTERNAL_STORAGE)
                    != PackageManager.PERMISSION_GRANTED) {
                ActivityCompat.requestPermissions(this,
                        new String[]{Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.WRITE_EXTERNAL_STORAGE},
                        REQUEST_PERMISSIONS);
            }
    
            findViewById(R.id.buttonPickImage).setOnClickListener(v -> pickImage());
            findViewById(R.id.buttonCrop).setOnClickListener(v -> cropImage());
            findViewById(R.id.buttonCancel).setOnClickListener(v -> cancelCrop());
            findViewById(R.id.buttonSave).setOnClickListener(v -> saveImage());
        }
    
        private void pickImage() {
            Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
            intent.setType("image/*");
            startActivityForResult(intent, PICK_IMAGE_REQUEST);
        }
    
        private void cropImage() {
            // 如果使用第三方库如uCrop,可以在这里启动裁剪活动
            // 这里我们假设CustomCropImageView已经包含了所有裁剪功能
            // 因此不需要启动新的活动。
        }
    
        private void cancelCrop() {
            // 重置CustomCropImageView的状态
            customCropImageView.resetTransformations();
        }
    
        private void saveImage() {
            Bitmap bitphpmap = customCropImageView.getCroppedBitmap(); // 获取裁剪后的位图
            try {
                File path = new File(getExternalFilesDir(null), "custom_folder");
                if (!path.exists()) {
                    path.mkdirs();
                }
                File file = new File(path, "cropped_image.jpg");
                FileOutputStream out = new FileOutputStream(file);
                bitmap.compress(Bitmap.CompressFormat.JPEG, 90, out);
                out.flush();
                out.close();
                // 提示用户图片已保存
            } catch (IOException e) {
                e.printStackTrace();
                // 处理保存失败的情况
            }
        }
    
        @Override
        protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
            super.onActivityResult(requestCode, resultCode, data);
            if (requestCode == PICK_IMAGE_REQUEST && resultCode == RESULT_OK && data != null && data.getData() != null) {
                imageUri = data.getData();
                try {
                    // 将选择的图片加载到CustomCropImageView中
                    Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), imageUri);
                    customCropImageView.setImageBitmap(bitmap);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    
        @Override
        public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
            super.onRequestPermissionsResult(requestCode, permissions, grantResults);
            if (requestCode == REQUEST_PERMISSIONS) {
                if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                    // 权限授予成功,可以继续进行图片选择等操作
                } else {
                    // 用户拒绝了权限,需要提示用户或者禁用相关功能
                }
            }
        }
    }
    

    总结

    通过上述步骤,我们完成了一个具有裁剪功能的Android demo。该应用允许用户从相册或相机选择图片,在界面上进行裁剪、旋转和缩放,并最终将处理过的图片保存到指定位置。

    以上就是Android实现图片裁剪处理的操作步骤的详细内容,更多关于Android图片裁剪处理的资料请关注编程客栈(www.devze.com)其它相关文章!

    0

    上一篇:

    下一篇:

    精彩评论

    暂无评论...
    验证码 换一张
    取 消

    最新开发

    开发排行榜