Flutter 绘制大揭秘：你的 Canvas 岂止会画画，还会保存成图片！

Android

2023-02-15 09:39:00

如何在 Flutter 中将 Canvas 绘制保存为图片？

Canvas 绘制的魅力

在 Flutter 开发中，Canvas 绘制无疑是展现创意和艺术才华的一大法宝。无论是绘制图形、线条还是文字，开发者都可以信手拈来，创作出栩栩如生的画作。但这些画作往往只存在于屏幕上，转瞬即逝，无法永久保存。

将 Canvas 绘制保存为图片

为了解决这一问题，Flutter 提供了一种便捷的方式，可以让开发者将 Canvas 绘制的内容保存为图片，以便分享、发布和存档。这个过程十分简单，只需要几个简单的步骤即可实现。

步骤 1：创建 RenderRepaintBoundary 小部件

RenderRepaintBoundary 小部件是一个特殊的容器，它可以将子部件的绘制结果转换为图像。为了将 Canvas 绘制保存为图片，需要将 Canvas 包含在 RenderRepaintBoundary 小部件中。

import 'package:flutter/rendering.dart';

RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();

步骤 2：将 RenderRepaintBoundary 转换为图像

要将 RenderRepaintBoundary 转换为图像，可以使用 RepaintBoundary.toImage 方法。该方法返回一个 Image 对象，其中包含了子部件的绘制结果。

import 'dart:async';

Future<Image> toImage() async {
  return await repaintBoundary.toImage();
}

步骤 3：显示或保存图像

将 RenderRepaintBoundary 转换为图像后，就可以根据需要显示或保存图像。

显示图像： 可以使用 Image.memory 小部件将图像显示在屏幕上。

Image(image: MemoryImage(imageBytes))

保存图像： 可以使用 dart:io 库中的 File 类将图像保存到本地文件中。

import 'dart:io';

File saveImage(Uint8List imageBytes) {
  File file = File('/path/to/image.png');
  file.writeAsBytes(imageBytes);
  return file;
}

示例代码

下面是一个简单的示例代码，展示了如何将 Canvas 绘制保存为图片：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:typed_data';
import 'dart:async';
import 'dart:io';

class CanvasExample extends StatefulWidget {
  @override
  _CanvasExampleState createState() => _CanvasExampleState();
}

class _CanvasExampleState extends State<CanvasExample> {
  RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();
  Image image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Canvas Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomPaint(
              painter: MyPainter(),
              child: SizedBox(
                width: 200,
                height: 200,
              ),
            ),
            SizedBox(height: 20),
            image != null ? Image.memory(image.bytes) : Container(),
            ElevatedButton(
              onPressed: () async {
                final image = await repaintBoundary.toImage();
                final byteData = await image.toByteData(format: ImageByteFormat.png);
                setState(() {
                  this.image = Image.memory(byteData.buffer.asUint8List());
                });
                final file = await saveImage(byteData.buffer.asUint8List());
                print('Image saved to ${file.path}');
              },
              child: Text('Save Image'),
            ),
          ],
        ),
      ),
    );
  }

  Future<File> saveImage(Uint8List imageBytes) async {
    final directory = await getApplicationDocumentsDirectory();
    final file = File('${directory.path}/image.png');
    await file.writeAsBytes(imageBytes);
    return file;
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(Rect.fromLTWH(0, 0, 100, 100), Paint()..color = Colors.red);
    canvas.drawLine(Offset(0, 0), Offset(100, 100), Paint()..color = Colors.blue);
    canvas.drawCircle(Offset(50, 50), 20, Paint()..color = Colors.green);
    canvas.drawText(TextSpan(text: 'Hello World!', style: TextStyle(color: Colors.black, fontSize: 20)), Offset(0, 100), Paint());
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}