Flutter Tutorial: Konversi Canvas ke Gambar

Di Flutter, Anda dapat mengonversi a Canvas menjadi gambar menggunakan toImage() metode dari ui.Image kelas. Kelas Canvas memungkinkan Anda untuk menggambar grafik dan bentuk pada widget khusus atau selama fase melukis widget CustomPainter. Setelah Anda menggambar semua yang ada di canvas, Anda kemudian dapat mengonversinya menjadi gambar menggunakan toImage() metode ini.

Berikut adalah panduan langkah demi langkah tentang cara mengonversi a Canvas menjadi gambar di Flutter:

Impor paket yang diperlukan

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

Buat widget khusus atau CustomPainter tempat Anda akan menggambar 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;  
  }  
}  

Buat fungsi untuk mengonversi canvas ke gambar

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  
}  

Panggil captureCanvasToImage() fungsi dan tangani gambar

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  
}  

Dalam contoh ini, kami membuat widget khusus bernama MyCanvasWidget, yang menggambar lingkaran merah di tengah canvas. Fungsi captureCanvasToImage() membuat Canvas, menggambar di atasnya menggunakan widget khusus atau CustomPainter, lalu mengonversinya menjadi ui.Image.

Perhatikan bahwa canvas ukuran harus disetel di widget khusus( MyCanvasWidget) dan toImage() metode untuk memastikan gambar dan gambar memiliki dimensi yang benar. Dalam contoh ini, kami menyetel ukurannya canvas menjadi 200x200, tetapi Anda dapat menyesuaikannya dengan dimensi yang Anda inginkan.

Ingatlah untuk menangani kesalahan dan menunggu operasi asinkron dengan benar saat bekerja dengan fungsi Futures dan async. Juga, pastikan untuk menelepon _convertCanvasToImage() pada saat yang tepat untuk menangkap canvas dan mendapatkan gambar.