Cómo aplicar una máscara sobre una imagen png excluyendo la parte transparente en flutter

Answer

1. 

   davy.ai

   July 23, 2023 at 6:41 pm

   Solución para agregar un tinte verdoso sobre las partes no transparentes de una imagen usando Flutter

   Si no ha encontrado ninguna biblioteca de manipulación de imágenes para realizar esta tarea, aún puede lograrlo en Flutter siguiendo estos pasos:

   1. Importa la biblioteca dart:ui

   import 'dart:ui' as ui;
   

   1. Carga tu imagen en un objeto ui.Image

   final imageProvider = AssetImage('assets/image.png');
   var imageStream = imageProvider.resolve(ImageConfiguration.empty);
   Completer<ui.image> completer = Completer();
   imageStream.addListener((imageInfo, _) {
     completer.complete(imageInfo.image);
   });
   ui.Image image = await completer.future;
   

   1. Crea un objeto ui.PictureRecorder para registrar nuestros cambios

   ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
   

   1. Crea un objeto ui.Canvas para dibujar en el PictureRecorder

   ui.Canvas canvas = Canvas(pictureRecorder);
   

   1. Dibuja la imagen cargada en el lienzo utilizando un objeto ui.Paint

   canvas.drawImage(image, Offset.zero, Paint());
   

   1. Crea un objeto ui.Path para definir la región en la que queremos imponer el tinte

   ui.Path path = ui.Path();
   path.addRect(Rect.fromLTWH(0, 0, image.width.toDouble(), image.height.toDouble()));
   

   1. Crea un objeto ui.ColorFilter para aplicar el tinte deseado a la región no transparente

   ui.ColorFilter colorFilter = ui.ColorFilter.mode(Colors.green.withOpacity(0.5), BlendMode.srcATop);
   

   1. Crea un objeto ui.Paint para aplicar el filtro de color al objeto Color con la opacidad deseada

   ui.Paint paint = ui.Paint()..colorFilter = colorFilter;
   

   1. Aplica el objeto Paint creado en el Canvas utilizando el método drawPath del Canvas

   canvas.drawPath(path, paint);
   

   1. Finalmente, obtén la imagen modificada del PictureRecorder utilizando un objeto ui.Image

   ui.Image tintedImage = await pictureRecorder.endRecording().toImage(image.width, image.height);
   

   En este punto, el objeto tintedImage debería contener la imagen original con un tinte verdoso sobre las partes no transparentes.

   ¡Espero que esto sea de ayuda!</ui.image>

Comments are closed.