Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android图片裁剪处理

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

作者:望佑

这篇文章介绍了构建具有图片选择、裁剪(含手动缩放和旋转)及保存到自定义路径功能的 Android 应用 demo 的步骤,包括设置权限、创建布局文件、实现自定义视图CustomCropImageView、更新Activity逻辑等,最终完成了具有完整裁剪功能的应用,需要的朋友可以参考下

前言

本文将介绍如何构建一个支持图片选择、裁剪(包括手动缩放和旋转)、以及保存到自定义路径的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]; // 上次触摸位置,用于计算移动距离
    private 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());
        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.ACTION_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 GestureDetector.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 bitmap = 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图片裁剪处理的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文