Comprensión de la imagen básica

Core Image es el marco de procesamiento de imágenes de alto rendimiento de Apple que proporciona una rica colección de filtros incorporados, ajustes de color y operaciones de compositing. Aprovecha la aceleración de GPU para ofrecer un rendimiento en tiempo real, lo que lo hace ideal para construir aplicaciones de edición de fotos sensibles en iOS. El marco se integra estrechamente con UIKit, SwiftUI y Metal, lo que significa que puede construir una experiencia de edición de fluidos con los parámetros en vivo.

Core Image soporta más de 200 filtros, incluyendo efectos desenfoque, ajustes de color, efectos de distorsión, filtros de estilización y efectos de transición. Cada filtro acepta parámetros clave que controlan su comportamiento, como intensidad, radio o color. El marco también soporta filtros de encadenamiento juntos, permitiendo crear tuberías de procesamiento de imágenes complejas. Entendiendo cómo trabajar con ,

Configuración de su entorno de desarrollo

Para comenzar a desarrollar su aplicación de edición de fotos, comience instalando la última versión de Xcode desde Mac App Store. Cree un nuevo proyecto seleccionando la plantilla iOS App, elija Swift como lenguaje de programación y opte por Storyboard o SwiftUI como el constructor de interfaces dependiendo de su preferencia. Una vez que se crea su proyecto, importa el marco Core Image en los archivos donde se realizará el procesamiento de imágenes:

También puede necesitar importar otros marcos como para componentes de la interfaz de usuario, para acceder a la biblioteca de fotos, y si planea utilizar la aceleración del hardware o crear filtros personalizados basados en metal. Asegúrese de que su objetivo de implementación se establece en iOS 13 o más adelante para aprovechar plenamente las características modernas de la imagen de núcleo.

Instalación de dependencias

Si planea ampliar Core Image con filtros personalizados o integrar bibliotecas de terceros para funciones adicionales, considere utilizar Swift Package Manager o CocoaPods. Sin embargo, para la mayoría de las tareas de edición de fotos estándar, los filtros incorporados de Core Image son suficientes. Familiarícese con la interfaz Xcode, incluyendo el catálogo de activos para gestionar los recursos de imagen y el storyboard para establecer la interfaz de usuario.

Diseño de la interfaz de usuario

Una interfaz de usuario bien diseñada es crítica para una aplicación de edición de fotos. La interfaz debe ser intuitiva, sensible y visualmente limpia. Comience con una vista primaria que muestra la imagen seleccionada. Debajo o junto a la imagen, coloque un conjunto de controles para seleccionar filtros, ajustar parámetros y realizar acciones como guardar o compartir.

Considere el uso de un UICollectionView o SwiftUI LazyVGrid para presentar miniaturas de filtro. Cada miniatura muestra una vista previa de la imagen con el filtro correspondiente aplicado, dando a los usuarios una referencia visual rápida. Use UISlider o SwiftUI Slider para ajustes de parámetro como intensidad, brillo o saturación. Un UIStepper puede ser utilizado para ajustes discretos como la rotación del estado de reinicio.

Consideraciones previas a la vista en vivo

Implementar una vista previa en vivo requiere actualizar la imagen en tiempo real a medida que el usuario ajusta los parámetros. Utilice un con un dispositivo Metal para el mejor rendimiento. Render la imagen filtrada en un hilo de fondo y actualizar la interfaz de usuario en la cola principal. Evite renderizar en la resolución completa de la imagen original durante los ajustes en vivo; en lugar, utilice una versión desmontada para previsualizaciones y aplicar la cadena final de filtro en resolución completa.

Agregar la selección de imágenes

Para permitir que los usuarios elijan imágenes de su biblioteca de fotos, use o el nuevo (introducido en iOS 14). ofrece una API moderna y asincrónica que respeta la privacidad de los usuarios y admite múltiples selecciones. Configurar el selector para permitir solo imágenes, establecer un delegado y presentarla de forma modulada.

Usando PHPickerViewController:

Cuando el usuario selecciona una imagen, carga los datos de activos y crea un UIImage. Convierta este UIImage en un CIImage utilizando para comenzar el procesamiento. Para las imágenes capturadas directamente de la cámara, use .

Trabajando con CIImage y la tubería de procesamiento de imágenes

Core Image opera en objetos, que son representaciones inmutables de imágenes. Un CIImage puede ser creado a partir de un UIImage, una URL de archivo, datos de píxeles crudos, o incluso generados programáticamente. El trazo de procesamiento de imágenes sigue estos pasos:

  1. Introducción: Crear un CIImage de la imagen fuente.
  2. Cadena de Filter: Aplica uno o más objetos CIFilter al CIImage. Cada filtro modifica la imagen basada en sus parámetros.
  3. Context Rendering: Usa un CIContext para convertir el producto final CIImage en una imagen de CGImage o una textura de metal.
  4. Display:] Convertir el GGImage en una UIImage y mostrarlo en la UI.

Aquí hay un ejemplo de crear una CIImage de un UIImage y mostrarla:

Al mantener el CIImage como objeto de trabajo, puede encadenar filtros sin renderizado intermedio, preservando el rendimiento y la calidad de imagen.

Entender CIContext

El es el motor de renderización de Core Image. Gestiona los recursos de GPU o CPU y realiza el procesamiento de píxeles real. Cree un CIContext con un dispositivo de metal para la aceleración del hardware:

Si usted está renderizando muchas imágenes o realizando cadenas de filtros complejas, reutiliza una sola instancia CIContext para evitar la recreación de recursos de GPU. El contexto se puede crear una vez y utilizar a lo largo del ciclo de vida de la aplicación.

Aplicar filtros de imagen núcleo

Core Image proporciona docenas de filtros agrupados en categorías como Ajustamiento de Colores, Blur, Distortion, Stylize y Transition. Cada filtro es identificado por un nombre de cuerda como o . Para aplicar un filtro, siga estos pasos generales:

  1. Crear un ejemplo de CIFilter usando .
  2. Establecer la imagen de entrada usando .
  3. Establecer parámetros específicos para filtros usando las teclas apropiadas como , , o las teclas personalizadas.
  4. Recuperar la salida CIImage de la propiedad del filtro .

Ejemplo: Aplicando un efecto Vignette]

Después de obtener la salida CIImage, lo convierte en un CGImage utilizando el CIContext:

Filtros de uso común para la edición de fotos

  • CISepiaTone: Añade un tinte de sepia tinte cálido. Parámetro: (0.0 a 1.0).
  • CIPhotoEffectNoir:] Se convierte en un aspecto negro y blanco de alto contraste. No hay parámetros ajustables además de la imagen de entrada.
  • CIGaussianBlur: Aplica un borrón gaussiano. Parámetro: (pixeles).
  • CIVignette: Oscurece los bordes de la imagen. Parámetros: y .
  • CIColorControles: Ajusta el brillo, el contraste y la saturación. Parámetros: , , ].
  • CIExposureAdjust: Ajusta la exposición. Parámetro: ] (valor de exposición).
  • CIHighlightShadowAjust: Controla los puntos de interés y las sombras. Parámetros: , .

Para una lista completa de filtros disponibles, consulte la Documentación de CDI en el sitio de desarrolladores de Apple. Experimente con diferentes filtros para entender sus alcances de impacto visual y parámetro.

Construir un sistema de vista previa del filtro

Para permitir que los usuarios exploren los filtros visualmente, generen vistas de miniatura para cada filtro. Muestra la imagen original a un tamaño más pequeño (por ejemplo, 200x200 puntos) y aplica el filtro a la versión desampled. Almacene el UIImage resultante en un array y lo muestre en una vista de la colección. Este enfoque proporciona una retroalimentación rápida sin consumir excesiva memoria o poder de procesamiento.

Cadena de múltiples filtros

La edición de fotos en el mundo real requiere a menudo la aplicación de múltiples ajustes en secuencia. Core Image soporta la cadena de filtros alimentando la salida de un filtro como la entrada a otro. Debido a que CIImage es inmutable, puede cadena filtros sin efectos secundarios.

Ejemplo: Sepia Tone Seguido por un Vignette

Caden tantos filtros como sea necesario, pero ten cuidado con el rendimiento. Cada filtro añade una sobrecarga computacional, especialmente cuando usa previsiones en tiempo real. Considere usar una estrategia de caché para resultados intermedios si necesita deshacer pasos de filtro individuales.

Creación de una línea de edición no destructiva

Para una aplicación de edición de fotos de grado profesional, implemente un oleoducto de edición no destructivo. Almacene el CIImage original y una lista de filtros aplicados con sus parámetros. Cuando el usuario ajusta un parámetro, reedifique la cadena de filtros de la imagen original y aplique todos los filtros en orden. Este enfoque preserva la calidad de imagen y permite al usuario volver a revisar y modificar cualquier ajuste anterior.

Mejorar la experiencia de usuario con controles interactivos

Los controles interactivos hacen que el proceso de edición sea intuitivo y agradable. Use UISlider para parámetros continuos como el brillo o el radio borroso, y use UIStepper para cambios discretos como incrementos de rotación. Ajuste el valor deslizante al parámetro de filtro y active una re-render cuando el valor cambie.

Real-Time Slider Ejemplo:

Para el método , haga que la cadena de filtro se vuelva a un CI desamparadoImage y actualice la UIImageView en el hilo principal. Use el trineo o el desbocado para evitar el renderizado excesivo cuando el deslizador se mueva rápidamente.

Agregar las Gesturas de Comparación

Un patrón UX útil es la comparación antes y después. Implementar un gesto de tap-and-hold que revierte temporalmente la pantalla a la imagen original, permitiendo al usuario ver el efecto de sus ediciones. Alternativamente, un slider de visión dividida puede revelar la mitad del original y la mitad de la imagen editada. UIScreenEdgePanGestureRecognizer o un control de posición de UIPanGestureRecognizer personalizado.

Optimización del rendimiento

El rendimiento es crítico para una experiencia de edición de fotos suave. Imagen básica es acelerado por GPU, pero el uso ineficiente puede causar retraso, especialmente con imágenes de alta resolución de los iPhones modernos.

  • Use un solo CIContext: Crear múltiples instancias de CIContext es caro. Reutilizar un contexto a lo largo de la aplicación.
  • Abajo de la vista previa: Durante la edición en vivo, aplique filtros a una versión desamparada de la imagen (por ejemplo, 1024px en el lado más largo). Render la imagen de resolución completa sólo cuando el usuario ahorra o exporta.
  • Render en hilos de fondo: Las operaciones de Core Image son seguras de hilo. Realizar la presentación en una cola de fondo serie y enviar actualizaciones de interfaz de usuario a la cola principal.
  • Use Metal para renderizar: Crear su CIContext con un dispositivo Metal para aprovechar la aceleración de la GPU: .
  • cadenas de filtros de emisión: Para previsualizaciones en tiempo real, mantenga la cadena de filtros corta. Si el usuario aplica muchos filtros, considere la combinación de ellos en una sola subclase que realiza múltiples operaciones en un solo paso.
  • Perfil con instrumentos: Utilizar la herramienta Instrumentos de Xcode para identificar los cuellos de botella de rendimiento. Las plantillas de Animación y GPU Core ayudan a visualizar el rendimiento de renderizado.

Gestión de memoria

Los objetos CIImage pueden tener referencias a grandes amortiguadores de imagen. Liberar objetos CIImage que ya no son necesarios para fijarlos a cero. Utilice las piscinas autorelease en bucles de renderización ajustada para mantener el uso de la memoria bajo control. Para imágenes extremadamente grandes, considere la renderización de baldosas utilizando para procesar la imagen en los azulejos.

Características avanzadas

Para que su aplicación se destaque, considere agregar características avanzadas más allá de los filtros básicos.

Cultivos y rotación

Use para implementar la cosecha. Para la rotación, aplique o utilice para rotaciones simples de 90 grados. Proporcionar guías visuales como una rejilla y un rectángulo reflexible de cultivos. Almacene el rectángulo de cultivo como un CGRect y aplique como el paso final en la cadena de filtros.

Ajuste de curvas y niveles de color

Core Image proporciona y para la clasificación avanzada de color. Estos filtros aceptan puntos de control que definen curvas de color personalizado, dando a los usuarios experimentados un control fino sobre el rango tonal de la imagen.

Detección y mejora de rostro

Integrar para la detección de caras. Una vez detectadas las caras, puede aplicar ajustes locales como el suavizado de la piel, la corrección de ojos rojos o la auto-enhancement. CIDetector proporciona límites para cada cara, que puede utilizar para aplicar filtros sólo a regiones específicas.

Ahorro y exportación

Después de que el usuario complete la edición, guarde la imagen a la biblioteca de fotos utilizando . Proveer opciones para exportar en diferentes formatos (JPEG, PNG, HEIF) y resoluciones. Use o para escribir los datos de imagen. Para compartir, utilice el UIActivityViewController para permitir que los usuarios compartan a redes sociales, mensajería u otras aplicaciones.

Pruebas de tu aplicación

Prueba en una variedad de dispositivos iOS con diferentes tamaños de pantalla, potencia de procesamiento y resoluciones de cámara. Utilice el simulador para iteraciones rápidas, pero siempre prueba en dispositivos físicos para mediciones de rendimiento precisas. Preste especial atención al uso de memoria y velocidad de marco durante la vista previa en vivo. Escribe pruebas de unidad para tu lógica de cadena de filtros y pruebas de instantánea para verificar que los productos de filtro siguen siendo consistentes en versiones iOS.

Conclusión

Crear una aplicación de edición de fotos con Core Image es un proyecto que combina el procesamiento de imágenes, diseño de interfaz de usuario y optimización de rendimiento. Al entender el oleoducto de imagen central, aprovechar filtros incorporados, operaciones de encadenamiento y optimizar el rendimiento en tiempo real, puede crear una aplicación que se sienta profesional y sensible.