Flutter Zelfstudie: Converteren Canvas naar afbeelding

In Flutter kun je een afbeelding converteren Canvas naar een afbeelding met behulp van de toImage() methode van de ui.Image klasse. Met de Canvas klasse kun je afbeeldingen en vormen tekenen op een aangepaste widget of tijdens de tekenfase van een widget CustomPainter. Zodra je alles op de hebt getekend canvas, kun je het met de methode naar een afbeelding converteren toImage().

Hier is een stapsgewijze handleiding voor het converteren van een afbeelding Canvas naar een afbeelding in Flutter:

Importeer de benodigde pakketten

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

Maak een aangepaste widget of een CustomPainter waar je op tekent 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;  
  }  
}  

Maak een functie om de canvas afbeelding naar een afbeelding te converteren

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  
}  

Roep de captureCanvasToImage() functie aan en behandel de afbeelding

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 dit voorbeeld hebben we een aangepaste widget gemaakt met de naam MyCanvasWidget, die een rode cirkel tekent in het midden van het canvas. De captureCanvasToImage() functie maakt een Canvas, tekent erop met behulp van de aangepaste widget of CustomPainter en converteert het vervolgens naar een ui.Image.

Merk op dat de canvas grootte moet worden ingesteld in zowel de aangepaste widget( MyCanvasWidget) als de toImage() methode om ervoor te zorgen dat de tekening en afbeelding de juiste afmetingen hebben. In dit voorbeeld stellen we het canvas formaat in op 200x200, maar je kunt het naar wens aanpassen.

Vergeet niet om fouten af ​​te handelen en de asynchrone bewerkingen correct af te wachten bij het werken met Futures en asynchrone functies. Zorg er ook voor dat u _convertCanvasToImage() indien nodig belt om de canvas afbeelding vast te leggen en te verkrijgen.