Flutter บทช่วยสอน: แปลง Canvas เป็นรูปภาพ

ใน Flutter คุณสามารถแปลง a Canvas เป็นรูปภาพโดยใช้ toImage() เมธอดจาก ui.Image คลาส คลาส นี้ Canvas อนุญาตให้คุณวาดกราฟิกและรูปร่างบนวิดเจ็ตที่กำหนดเองหรือระหว่างขั้นตอนการระบายสีของวิดเจ็ CustomPainter ต เมื่อคุณวาดทุกอย่างบน canvas, คุณสามารถแปลงเป็นภาพโดยใช้ toImage() เมธอด

ต่อไปนี้เป็นคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีแปลง a Canvas เป็นรูปภาพใน Flutter:

นำเข้าแพ็คเกจที่จำเป็น

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

สร้างวิดเจ็ตแบบกำหนดเองหรือ CustomPainter ตำแหน่งที่คุณจะวาดบน 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;  
  }  
}  

สร้างฟังก์ชันเพื่อแปลง the canvas เป็นรูปภาพ

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  
}  

เรียกใช้ captureCanvasToImage() ฟังก์ชันและจัดการกับรูปภาพ

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  
}  

ในตัวอย่างนี้ เราสร้างวิดเจ็ตแบบกำหนดเองชื่อ ซึ่ง MyCanvasWidget วาดวงกลมสีแดงที่กึ่งกลางของ canvas ฟังก์ชัน captureCanvasToImage() สร้าง Canvas, วาดโดยใช้วิดเจ็ตแบบกำหนดเองหรือ CustomPainter, จากนั้นแปลงเป็น ui.Image.

โปรดทราบว่า canvas ควรตั้งค่าขนาดทั้งในวิดเจ็ตแบบกำหนดเอง( MyCanvasWidget) และ toImage() เมธอด เพื่อให้แน่ใจว่าภาพวาดและรูปภาพมีขนาดที่ถูกต้อง ในตัวอย่างนี้ เรากำหนด canvas ขนาดเป็น 200x200 แต่คุณสามารถปรับให้เป็นขนาดที่ต้องการได้

อย่าลืมจัดการกับข้อผิดพลาดและรอการดำเนินการแบบอะซิงโครนัสอย่างถูกต้องเมื่อทำงานกับฟังก์ชัน Futures และ async นอกจากนี้ ตรวจสอบให้แน่ใจว่าได้โทรหา _convertCanvasToImage() เมื่อเหมาะสมเพื่อจับภาพ canvas และรับภาพ