Recorte circular una imagen y guárdela en el archivo en Android

Existen múltiples aplicaciones disponibles en el mercado que ayudan a lidiar con el procesamiento de imágenes, mientras que la mayoría de ellas no producen operaciones muy básicas. Recortar es una aplicación sencilla en la que se puede cambiar el tamaño de una imagen cortándola. Esta tarea se vuelve compleja cuando se trata de recortar a mano alzada o con forma, es decir, recortar la imagen en la forma deseada.

En este artículo, le mostraremos cómo crear una aplicación para recortar una imagen de manera circular y almacenarla en el dispositivo local. No se utiliza ninguna biblioteca o servicio externo para generar esta aplicación.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: agregue un ImageView y dos botones en la actividad_principal.xml o el archivo de diseño

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
      <!-- Image will be loaded here -->
    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_centerInParent="true" />
  
      <!-- Button to perform Cropping -->
    <Button
        android:id="@+id/btnCrop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Crop" />
  
      <!-- Button to save the image in ImageView -->
    <Button
        android:id="@+id/btnSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Save" />
  
</RelativeLayout>

Paso 3: agregue la imagen deseada en la carpeta res> dibujable

Mientras agrega, asígnele el nombre deseado. Para nuestra referencia, esta imagen es «image.png» que se descarga de Internet y se copia directamente en la carpeta dibujable.

Paso 4: escribe el siguiente código para MainActivity.kt

Hay dos funciones dentro de este código:

1. getCircularBitmap(Bitmap) : Para recortar la imagen
2. saveMediaToStorage(Bitmap) : Para guardar la imagen. Consulte ¿Cómo capturar una captura de pantalla de una vista y guardarla en la galería en Android?

Consulte los comentarios para una mejor comprensión.

import android.content.ContentValues
import android.graphics.*
import android.net.Uri
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Environment
import android.provider.MediaStore
import android.widget.Button
import android.widget.ImageView
import android.widget.Toast
import androidx.annotation.RequiresApi
import java.io.File
import java.io.FileOutputStream
import java.io.OutputStream
import java.lang.Integer.min
  
class MainActivity : AppCompatActivity() {
  
    // Declaring the UI elements from the layout file
    private lateinit var buttonCrop: Button
    private lateinit var buttonSave: Button
    private lateinit var imageView: ImageView
    
    // Declaring the Bitmap
    private lateinit var bitmap: Bitmap
  
    @RequiresApi(Build.VERSION_CODES.N)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Initializing the UI elements
        imageView = findViewById(R.id.iv)
        buttonCrop = findViewById(R.id.btnCrop)
        buttonSave = findViewById(R.id.btnSave)
  
        // Declaring resource address ( type integer)
        val bitmapResourceID: Int = R.drawable.image
        
        // Setting the ImageView with the Image
        imageView.setImageBitmap(BitmapFactory.decodeResource(resources, bitmapResourceID))
        bitmap = BitmapFactory.decodeResource(resources, bitmapResourceID)
  
        // When Crop button is clicked
        buttonCrop.setOnClickListener {
              // runs a custom function on the original image
            bitmap = getCircularBitmap(bitmap)
              
            // Sets the ImageView with the editted/cropped Image
            imageView.setImageBitmap(bitmap)
        }
  
        // When Save button is clicked
        buttonSave.setOnClickListener {
             // Save whatever the bitmap is (edited/uneditted) into the device.
            saveMediaToStorage(bitmap)
        }
    }
  
    // Function to crop the image in a circle
    @RequiresApi(Build.VERSION_CODES.N)
    private fun getCircularBitmap(srcBitmap: Bitmap?): Bitmap {
        
        // Select whichever of width or height is minimum
        val squareBitmapWidth = min(srcBitmap!!.width, srcBitmap.height)
          
        // Generate a bitmap with the above value as dimensions
        val dstBitmap = Bitmap.createBitmap(
            squareBitmapWidth,
            squareBitmapWidth,
            Bitmap.Config.ARGB_8888
        )
          
        // Initializing a Canvas with the above generated bitmap
        val canvas = Canvas(dstBitmap)
          
        // initializing Paint
        val paint = Paint()
        paint.isAntiAlias = true
        
        // Generate a square (rectangle with all sides same)
        val rect = Rect(0, 0, squareBitmapWidth, squareBitmapWidth)
        val rectF = RectF(rect)
          
        // Operations to draw a circle
        canvas.drawOval(rectF, paint)
        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)
        val left = ((squareBitmapWidth - srcBitmap.width) / 2).toFloat()
        val top = ((squareBitmapWidth - srcBitmap.height) / 2).toFloat()
        canvas.drawBitmap(srcBitmap, left, top, paint)
        srcBitmap.recycle()
          
        // Return the bitmap
        return dstBitmap
    }
  
    // Function to save an Image
    private fun saveMediaToStorage(bitmap: Bitmap) {
        val filename = "${System.currentTimeMillis()}.jpg"
  
        var fos: OutputStream? = null
  
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
            this.contentResolver?.also { resolver ->
                val contentValues = ContentValues().apply {
                    put(MediaStore.MediaColumns.DISPLAY_NAME, filename)
                    put(MediaStore.MediaColumns.MIME_TYPE, "image/jpg")
                    put(MediaStore.MediaColumns.RELATIVE_PATH, Environment.DIRECTORY_PICTURES)
                }
                val imageUri: Uri? = resolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues)
                fos = imageUri?.let { resolver.openOutputStream(it) }
            }
        } else {
            val imagesDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES)
            val image = File(imagesDir, filename)
            fos = FileOutputStream(image)
        }
  
        fos?.use {
            bitmap.compress(Bitmap.CompressFormat.JPEG, 100, it)
            Toast.makeText(this , "Captured View and saved to Gallery" , Toast.LENGTH_SHORT).show()
        }
    }
}

Paso 4: Agregar permiso de almacenamiento en el archivo AndroidManifest.xml

Este permiso es necesario para almacenar la imagen en el dispositivo.

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

Producción: