Compreendendo a Imagem Principal

A Imagem Core é a estrutura de processamento de imagens de alto desempenho da Apple que fornece uma rica coleção de filtros embutidos, ajustes de cores e operações de composição. Ela aproveita a aceleração da GPU para oferecer desempenho em tempo real, tornando-a ideal para a construção de aplicativos de edição de fotos responsivos no iOS. A estrutura se integra firmemente com UIKit, SwiftUI e Metal, o que significa que você pode construir uma experiência de edição fluida com pré-visualizações ao vivo e parâmetros ajustáveis.

A Imagem Core suporta mais de 200 filtros, incluindo efeitos de borrão, ajustes de cores, efeitos de distorção, filtros de estilização e efeitos de transição. Cada filtro aceita parâmetros-chave que controlam o seu comportamento, como intensidade, raio ou cor. A estrutura também suporta filtros de encadeamento juntos, permitindo- lhe criar pipelines complexos de processamento de imagens. Compreender como trabalhar com [[FLT: 0]], , e [[FLT: 2]]] é fundamental para construir uma aplicação de edição de fotos com Imagem Core.

Configurando seu ambiente de desenvolvimento

Para começar a desenvolver o seu aplicativo de edição de fotos, comece instalando a versão mais recente do Xcode na Mac App Store. Crie um novo projeto selecionando o modelo do aplicativo iOS, escolha Swift como a linguagem de programação e opte pelo Storyboard ou SwiftUI como construtor de interface, dependendo de sua preferência. Uma vez criado o projeto, importe o framework de imagem principal nos arquivos onde você irá realizar o processamento de imagem:

Você também pode precisar importar outros frameworks como para componentes de interface, para acessar a biblioteca de fotos e se você planeja usar aceleração de hardware ou criar filtros personalizados baseados em metal. Certifique-se de que seu alvo de implantação está definido para iOS 13 ou mais tarde para tirar pleno proveito das funcionalidades modernas da Imagem Core.

Instalando dependências

Se você planeja estender a Imagem Core com filtros personalizados ou integrar bibliotecas de terceiros para funcionalidade adicional, considere usar o Swift Package Manager ou CocoaPods. No entanto, para a maioria das tarefas de edição de fotos padrão, os filtros incorporados da Imagem Core são suficientes. Familiarize-se com a interface Xcode, incluindo o catálogo de ativos para gerenciar recursos de imagem e o storyboard para estabelecer a interface do usuário.

Desenhando a Interface do Usuário

Uma interface de usuário bem projetada é fundamental para uma aplicação de edição de fotos. A interface deve ser intuitiva, responsiva e visualmente limpa. Comece com uma visão primária que mostra a imagem selecionada. Abaixo ou ao lado da imagem, coloque um conjunto de controles para selecionar filtros, ajustar parâmetros e executar ações como salvar ou compartilhar.

Considere usar um UICollectionView ou SwiftUI LazyVGrid para apresentar miniaturas de filtro. Cada miniatura mostra uma antevisão da imagem com o filtro correspondente aplicado, dando aos usuários uma referência visual rápida. Use o UISlider ou SwiftUI Slider para ajustes de parâmetros, como intensidade, brilho ou saturação. Um UIStepper pode ser usado para ajustes discretos, como ângulo de rotação. Forneça um botão de reset para retornar a imagem ao seu estado original e um botão de desfazer para reversão passo a passo.

Considerações de Visualização ao Vivo

A implementação de uma antevisão ao vivo requer a actualização da imagem em tempo real à medida que o utilizador ajusta os parâmetros. Use um com um dispositivo Metal para o melhor desempenho. Renderize a imagem filtrada num tópico de fundo e atualize a UI na fila principal. Evite renderizar na resolução completa da imagem original durante os ajustes ao vivo; em vez disso, use uma versão de amostra para antevisão e aplique a cadeia de filtro final na resolução completa quando o utilizador comprometer a edição.

Adicionando seleção de imagem

Para permitir que os usuários escolham imagens de sua biblioteca de fotos, use ou o mais novo (introduzido no iOS 14). oferece uma API moderna e assíncrona que respeita a privacidade do usuário e suporta várias opções. Configure o seletor para permitir apenas imagens, defina um delegado e apresente-a modalmente.

Usando PHPickerViewController:

Quando o usuário seleciona uma imagem, carregue os dados do ativo e crie uma imagem UIL. Converta esta imagem UIL para uma imagem CIIMage usando para iniciar o processamento. Para imagens capturadas diretamente da câmera, use .

Trabalhando com CIImage e o tubo de processamento de imagem

A Imagem Core opera em objetos , que são representações imutáveis de imagens. Uma CIImage pode ser criada a partir de uma UILmage, uma URL de arquivo, dados de pixels brutos ou mesmo gerados programáticamente. O pipeline de processamento de imagens segue estes passos:

  1. Input: Criar uma CIImage a partir da imagem de origem.
  2. Cadeia de filtro: Aplicar um ou mais objetos CIFilter para a CIImage. Cada filtro modifica a imagem com base em seus parâmetros.
  3. Renderização de Contexto: Use um CIContext para transformar a saída final CIImage em uma CGImage ou uma textura de Metal.
  4. Exibir: Converter o CGImage para um UIlmage e exibi-lo na UI.

Aqui está um exemplo de criação de uma CIImage de uma UIlmage e exibi-la:

Ao manter a CIImage como objeto de trabalho, você pode encadear filtros sem renderização intermediária, preservando o desempenho e a qualidade da imagem.

Compreender o contexto da CI

O é o mecanismo de renderização para a Imagem Core. Gere os recursos da GPU ou CPU e executa o processamento real de pixels. Crie um CIContext com um dispositivo de Metal para aceleração de hardware:

Se você estiver renderizando muitas imagens ou executando cadeias de filtro complexas, reutilize uma única instância CIContext para evitar a recreação de recursos da GPU. O contexto pode ser criado uma vez e usado durante todo o ciclo de vida da aplicação.

Aplicando os Filtros de Imagem Core

A Imagem Core oferece dezenas de filtros agrupados em categorias como Ajuste de Cor, Borrão, Distorção, Estilização e Transição. Cada filtro é identificado por um nome de string como ou . Para aplicar um filtro, siga estes passos gerais:

  1. Criar uma instância de CIFilter usando .
  2. Defina a imagem de entrada usando .
  3. Definir parâmetros específicos do filtro usando as teclas apropriadas como , , ou chaves personalizadas.
  4. Recuperar a saída CIImage da propriedade do filtro .

[[FLT: 0]]Exemplo: Aplicando um efeito de vinheta

Após obter a saída CIImage, torná-la para uma CGImage usando o CIContext:

Filtros Usados Comummente para Edição de Fotos

  • CISepiaTone:] Adiciona uma tonalidade de sépia quente. Parâmetro: ] (0.0 a 1.0).
  • CIPhotoEffectNoir:] Converte-se para um visual preto e branco de alto contraste. Sem parâmetros ajustáveis além da imagem de entrada.
  • [[FLT: 0]]CIGaussianBlur: Aplica um borrão gaussiano. Parâmetro: [FLT: 28] (pixels).
  • [[FLT: 0]]CIVignette: Escurece as bordas da imagem. Parâmetros: [[FLT: 29]] e [[FLT: 30]].
  • [[FLT: 0]]CIColorControles: Ajusta o brilho, contraste e saturação. Parâmetros: [[FLT: 31], [[FLT: 32]], [[FLT: 33]].
  • CIExposiçãoAjustar: Ajusta a exposição. Parâmetro: ] (valor da exposição).
  • [[FLT: 0]]CIHightShadowAdjust: [[FLT: 1]] Controla os destaques e sombras. Parâmetros: [[FLT: 35]], [[FLT: 36]].

Para uma lista completa de filtros disponíveis, consulte a documentação CIFilter no site de desenvolvimento da Apple. Experimente com diferentes filtros para entender seus intervalos de parâmetros e impacto visual.

Construindo um Sistema de Visualização de Filtros

Para permitir que os usuários naveguem pelos filtros visualmente, gere antevisão de miniaturas para cada filtro. Faça uma amostra da imagem original para um tamanho menor (por exemplo, 200x200 pontos) e aplique o filtro na versão da amostra. Armazene a UILmage resultante em uma matriz e a mostre em uma área de coleção. Esta abordagem fornece feedback rápido sem consumir memória excessiva ou poder de processamento.

Acorrentar vários filtros

A edição de fotos no mundo real requer frequentemente a aplicação de múltiplos ajustes em sequência. A Imagem Core suporta a encadeamento de filtros alimentando a saída de um filtro como entrada para outro. Como a CIImage é imutável, você pode encadear filtros sem efeitos colaterais.

Exemplo: Sepia Tone Seguido por uma Vinheta

Cadeia de tantos filtros quanto necessário, mas tenha cuidado com o desempenho. Cada filtro adiciona sobrecarga computacional, especialmente quando usar pré-visualizações em tempo real. Considere usar uma estratégia de cache para resultados intermediários se precisar de desfazer os passos individuais do filtro.

Criando uma Pipeline de Edição Não Destrutiva

Para uma aplicação de edição de fotos de nível profissional, implemente um gasoduto de edição não destrutivo. Guarde a CIImage original e uma lista de filtros aplicados com os seus parâmetros. Quando o utilizador ajustar um parâmetro, reconstrua a cadeia de filtros da imagem original e aplique todos os filtros de forma ordenada. Esta abordagem preserva a qualidade da imagem e permite ao utilizador rever e modificar qualquer ajuste anterior.

Melhorar a experiência do usuário com controles interativos

Os controles interativos tornam o processo de edição intuitivo e agradável. Use o UISlider para parâmetros contínuos como brilho ou raio de borrão, e use o UIStepper para mudanças discretas como incrementos de rotação. Ligue o valor da barra ao parâmetro filtro e desencadeie uma re-render quando o valor mudar.

[[FLT: 0]] Exemplo de Slider em Tempo Real:

Para o método , renderize a cadeia de filtro para uma CIImage com amostra reduzida e atualize a UILmageView no thread principal. Use o estrangulamento ou desbooning para evitar renderização excessiva quando a barra é movida rapidamente.

Adicionando Gestos de Comparação

Um padrão UX útil é a comparação antes e depois. Implemente um gesto de toque e retenção que reverte temporariamente a exibição para a imagem original, permitindo ao usuário ver o efeito de suas edições. Em alternativa, uma barra deslizante de visão dividida pode revelar metade do original e metade da imagem editada. UIScreenEdgePanGestureRecognizer ou um UIpanGestureRecognizer personalizado pode controlar a posição dividida.

Otimização de desempenho

O desempenho é fundamental para uma experiência suave de edição de fotos. A Imagem Core é acelerada por GPU, mas o uso ineficiente ainda pode causar defasagem, especialmente com imagens de alta resolução de iPhones modernos. Siga estas estratégias de otimização:

  • Use um único CIContext: Criar várias instâncias CIContext é caro. Reutilize um contexto em todo o aplicativo.
  • Amostra para visualização: Durante a edição ao vivo, aplique filtros a uma versão da imagem em uma amostra de baixo (por exemplo, 1024px no lado mais longo). Renderize a imagem em resolução completa apenas quando o usuário salvar ou exportar.
  • Rendere em threads de fundo: As operações de imagem principal são seguras para thread. Execute renderização em uma fila de fundo serial e envie atualizações de UI para a fila principal.
  • Use Metal para renderização:] Crie seu CIContext com um dispositivo Metal para alavancar aceleração da GPU: .
  • Limite as cadeias de filtro: Para pré-visualizações em tempo real, mantenha a cadeia de filtro curta. Se o usuário aplicar muitos filtros, considere combiná-los em uma única subclasse que executa várias operações em uma única passagem.
  • Perfil com Instrumentos: Use a ferramenta Instruments do Xcode para identificar gargalos de desempenho. Os modelos Core Animation e GPU ajudam a visualizar o desempenho de renderização.

Gestão de Memórias

Os objetos CIImage podem conter referências a buffers de imagens grandes. Solte objetos CIImage que não são mais necessários, configurando- os para zero. Use pools de liberação automática em loops de renderização apertados para manter o uso da memória sob controle. Para imagens extremamente grandes, considere renderização em azulejos usando para processar a imagem em azulejos.

Recursos Avançados

Para fazer seu aplicativo se destacar, considere adicionar recursos avançados além dos filtros básicos.

Aparar e girar

Use para implementar o recorte. Para rotação, aplique ou use para rotações simples de 90 graus. Forneça guias visuais como uma sobreposição de grade e um retângulo de cultura redimensionável. Guarde o retângulo de cultura como um CGREct e aplique-o como o passo final na cadeia de filtro.

Ajustando as Curvas e Níveis de Cores

A Imagem Core fornece e para classificação de cores avançada. Estes filtros aceitam pontos de controle que definem curvas de cores personalizadas, dando aos usuários experientes controle de granulação fina sobre o alcance tonal da imagem.

Detecção e aprimoramento de faces

Integrar para detecção de faces. Uma vez que as faces são detectadas, você pode aplicar ajustes locais, como suavização da pele, correção de olhos vermelhos ou auto-reforço. CIDetector fornece limites para cada face, que você pode usar para aplicar filtros apenas em regiões específicas.

Salvando e Exportando

Depois que o usuário concluir a edição, salve a imagem na biblioteca de fotos usando . Forneça opções para exportar em diferentes formatos (JPEG, PNG, HEIF) e resoluções. Use ou para escrever os dados da imagem. Para compartilhar, use o UIActivityViewController para permitir que os usuários compartilhem para mídias sociais, mensagens ou outros aplicativos.

Testando sua aplicação

Teste em uma variedade de dispositivos iOS com diferentes tamanhos de tela, potência de processamento e resoluções de câmera. Use o simulador para iterações rápidas, mas sempre teste em dispositivos físicos para medições de desempenho precisas. Preste atenção especial ao uso de memória e taxa de quadros durante a visualização ao vivo. Escreva testes unitários para sua lógica de cadeia de filtro e testes instantâneos para verificar se as saídas de filtro permanecem consistentes em todas as versões iOS.

Conclusão

Construir uma aplicação de edição de fotos com a Imagem Core é um projecto gratificante que combina processamento de imagens, design de interfaces de interface e otimização de desempenho. Ao compreender o gasoduto Core Image, alavancar filtros incorporados, operações de encadeamento e optimizar para o desempenho em tempo real, você pode criar uma aplicação que se sinta profissional e sensível. Comece com os fundamentos aqui descritos, depois itere em funcionalidades e design para corresponder à sua visão. Para mais exploração, consulte a documentação Apple Core Image framework[] e projectos de código de amostra. Podem ser encontradas orientações adicionais sobre a integração da Imagem Core com a SwiftUI nos tutoriais SwiftUI[] da Apple. Com a Imagem Core, o único limite é a sua criatividade.