Flutter Tutoriel : Convertir Canvas en image

Dans Flutter, vous pouvez convertir a Canvas en image en utilisant la toImage() méthode de la ui.Image classe. La Canvas classe vous permet de dessiner des graphiques et des formes sur un widget personnalisé ou pendant la phase de peinture d'un widget CustomPainter. Une fois que vous avez tout dessiné sur le canvas, vous pouvez ensuite le convertir en image en utilisant la toImage() méthode .

Voici un guide étape par étape sur la façon de convertir un Canvas en image dans Flutter:

Importer les package requis

import 'package:flutter/material.dart';  
import 'dart:ui' as ui;  

Créez un widget personnalisé ou un CustomPainter où vous dessinerez sur le canvas

class MyCanvasWidget extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return CustomPaint(  
      size: Size(200, 200), // Set the size of the canvas  
      painter: MyCanvasPainter(),  
   );  
  }  
}  
  
class MyCanvasPainter extends CustomPainter {  
  @override  
  void paint(Canvas canvas, Size size) {  
    // Draw on the canvas here  
    // For example, draw a red circle at the center  
    final Paint paint = Paint()..color = Colors.red;  
    final double centerX = size.width / 2;  
    final double centerY = size.height / 2;  
    final double radius = 50.0;  
    canvas.drawCircle(Offset(centerX, centerY), radius, paint);  
  }  
  
  @override  
  bool shouldRepaint(CustomPainter oldDelegate) {  
    return false;  
  }  
}  

Créer une fonction pour convertir le canvas en une image

Future<ui.Image> captureCanvasToImage() async {  
  final pictureRecorder = ui.PictureRecorder();  
  final canvas = Canvas(pictureRecorder);  
  
  // Create the custom widget or draw on the canvas using a CustomPainter  
  final widget = MyCanvasWidget();  
  widget.paint(canvas, Size(200, 200)); // Set the size of the canvas to match the custom widget size  
  
  final recordedPicture = pictureRecorder.endRecording();  
  return await recordedPicture.toImage(200, 200); // Set the image size, should match the canvas size  
}  

Appelez la captureCanvasToImage() fonction et manipulez l'image

void _convertCanvasToImage() async {  
  ui.Image image = await captureCanvasToImage();  
  // Use the image here as needed, such as displaying it in an `Image` widget or saving it to a file  
}  

Dans cet exemple, nous avons créé un widget personnalisé nommé MyCanvasWidget, qui dessine un cercle rouge au centre du canvas. La captureCanvasToImage() fonction crée un Canvas, dessine dessus à l'aide du widget personnalisé ou CustomPainter, puis le convertit en un ui.Image.

Notez que la canvas taille doit être définie à la fois dans le widget personnalisé( MyCanvasWidget) et dans la toImage() méthode pour garantir que le dessin et l'image ont les bonnes dimensions. Dans cet exemple, nous avons défini la canvas taille sur 200 x 200, mais vous pouvez l'ajuster aux dimensions souhaitées.

N'oubliez pas de gérer les erreurs et d'attendre correctement les opérations asynchrones lorsque vous travaillez avec les fonctions Futures et asynchrones. Assurez-vous également d'appeler _convertCanvasToImage() le cas échéant pour capturer canvas et obtenir l'image.