Flutter Tutorial: Canvas In Bild konvertieren

In Flutter können Sie mithilfe der Methode der Klasse ein Canvas Bild in ein Bild konvertieren. Mit der Klasse können Sie Grafiken und Formen auf einem benutzerdefinierten Widget oder während der Malphase eines Widgets zeichnen. Sobald Sie alles auf dem gezeichnet haben, können Sie es mit der Methode in ein Bild umwandeln. toImage() ui.Image Canvas CustomPainter canvas toImage()

Hier finden Sie eine Schritt-für-Schritt-Anleitung zum Konvertieren eines Canvas Bilds in ein Bild Flutter:

Importieren Sie die erforderlichen Pakete

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

Erstellen Sie ein benutzerdefiniertes Widget oder ein Widget, CustomPainter auf dem Sie zeichnen möchten 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;  
  }  
}  

Erstellen Sie eine Funktion zum Konvertieren canvas in ein Bild

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  
}  

Rufen Sie die captureCanvasToImage() Funktion auf und verarbeiten Sie das Bild

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  
}  

In diesem Beispiel haben wir ein benutzerdefiniertes Widget mit dem Namen erstellt MyCanvasWidget, das einen roten Kreis in der Mitte zeichnet canvas. Die captureCanvasToImage() Funktion erstellt eine Canvas, zeichnet sie mit dem benutzerdefinierten Widget oder auf CustomPainter und konvertiert sie dann in eine ui.Image.

Beachten Sie, dass die canvas Größe sowohl im benutzerdefinierten Widget( MyCanvasWidget) als auch in der toImage() Methode festgelegt werden sollte, um sicherzustellen, dass die Zeichnung und das Bild die richtigen Abmessungen haben. In diesem Beispiel stellen wir die canvas Größe auf 200 x 200 ein, Sie können sie jedoch an Ihre gewünschten Abmessungen anpassen.

Denken Sie daran, Fehler zu behandeln und die asynchronen Vorgänge ordnungsgemäß abzuwarten, wenn Sie mit Futures und asynchronen Funktionen arbeiten. Stellen Sie außerdem sicher, dass Sie bei Bedarf anrufen, _convertCanvasToImage() um das Bild aufzunehmen canvas und zu erhalten.