Flutter Handledning: Konvertera Canvas till bild

I Flutter kan du konvertera a Canvas till en bild med toImage() metoden från ui.Image klassen. Klassen Canvas låter dig rita grafik och former på en anpassad widget eller under målningsfasen av en widgets CustomPainter. När du har ritat allt på, canvas kan du sedan konvertera det till en bild med toImage() metoden.

Här är en steg-för-steg-guide om hur du konverterar en Canvas till en bild i Flutter:

Importera de nödvändiga paketen

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

Skapa en anpassad widget eller en plats CustomPainter där du ska rita på 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;  
  }  
}  

Skapa en funktion för att konvertera canvas till en 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  
}  

Ring captureCanvasToImage() funktionen och hantera bilden

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  
}  

I det här exemplet skapade vi en anpassad widget som heter, MyCanvasWidget som ritar en röd cirkel i mitten av canvas. Funktionen captureCanvasToImage() skapar en Canvas, ritar på den med den anpassade widgeten eller, CustomPainter och konverterar den sedan till en ui.Image.

Observera att canvas storleken ska ställas in i både den anpassade widgeten( MyCanvasWidget) och toImage() metoden för att säkerställa att ritningen och bilden har rätt mått. I det här exemplet ställer vi in canvas ​​storleken till 200x200, men du kan justera den till dina önskade mått.

Kom ihåg att hantera fel och invänta de asynkrona operationerna ordentligt när du arbetar med Futures och asynkrona funktioner. Se också till att ringa _convertCanvasToImage() när det är lämpligt för att fånga canvas och få bilden.