Flutter Tutorial: Konvertoni Canvas në imazh

Në Flutter, ju mund të konvertoni a Canvas në një imazh duke përdorur toImage() metodën nga ui.Image klasa. Klasa Canvas ju lejon të vizatoni grafika dhe forma në një miniaplikacion të personalizuar ose gjatë fazës së pikturimit të një miniaplikacioni CustomPainter. Pasi të keni vizatuar gjithçka në canvas, më pas mund ta konvertoni atë në një imazh duke përdorur toImage() metodën.

Këtu është një udhëzues hap pas hapi se si të konvertohet një imazh Canvas në një imazh në Flutter:

Importoni paketat e kërkuara

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

Krijoni një miniaplikacion të personalizuar ose një CustomPainter ku do të vizatoni 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;  
  }  
}  

Krijoni një funksion për ta kthyer atë canvas në një imazh

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  
}  

Thirrni captureCanvasToImage() funksionin dhe trajtoni imazhin

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  
}  

Në këtë shembull, ne krijuam një miniaplikacion të personalizuar me emrin MyCanvasWidget, i cili vizaton një rreth të kuq në qendër të canvas. Funksioni captureCanvasToImage() krijon një Canvas, vizatohet mbi të duke përdorur miniaplikacionin e personalizuar ose CustomPainter, dhe më pas e konverton atë në një ui.Image.

Vini re se canvas madhësia duhet të vendoset si në miniaplikacionin e personalizuar( MyCanvasWidget) ashtu edhe në toImage() metodën për të siguruar që vizatimi dhe imazhi të kenë dimensionet e duhura. Në këtë shembull, ne vendosëm canvas madhësinë në 200x200, por ju mund ta rregulloni atë në dimensionet tuaja të dëshiruara.

Mos harroni të trajtoni gabimet dhe të prisni siç duhet operacionet asinkrone kur punoni me Futures dhe funksionet asinkronike. Gjithashtu, sigurohuni që të telefononi _convertCanvasToImage() kur është e përshtatshme për të kapur canvas dhe për të marrë imazhin.