close

Flutter チュートリアル: Canvas 画像に 変換する

では、クラス のメソッド を使用して をイメージに 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() この例では canvas サイズを 200x200 に設定していますが、必要なサイズに調整できます。

Future および非同期関数を使用する場合は、エラーを処理し、非同期操作を適切に待機することを忘れないでください。 また、 _convertCanvasToImage() 必要に応じて電話をかけて、 canvas 画像をキャプチャして取得してください。