close

Flutter 자습서: Canvas 이미지로 변환

에서는 클래스 의 메서드를 사용하여 a를 이미지로 Flutter 변환할 수 있습니다. 이 클래스를 사용하면 사용자 정의 위젯에 또는 위젯의 페인팅 단계 중에 그래픽과 모양을 그릴 수 있습니다. 에 모든 것을 그린 후에는 메서드 를 사용하여 이미지로 변환할 수 있습니다. Canvas toImage() ui.Image Canvas CustomPainter canvas toImage()

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;  
  }  
}

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() 그림과 이미지가 올바른 크기를 갖도록 할 수 있습니다. 이 예에서는 크기를 200x200으로 설정했지만 canvas 원하는 크기로 조정할 수 있습니다.

Futures 및 비동기 함수로 작업할 때 오류를 처리하고 비동기 작업을 적절하게 대기해야 합니다. _convertCanvasToImage() 또한 적절한 시기에 호출하여 이미지를 캡처 하고 가져오도록 하십시오 canvas.