Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

theme: cyanosis

前言

光阴似箭，《Flutter 绘制指南 - 妙笔生花》转眼间已经发布两年半了，不知道各位练习得怎么样。有不少朋友问过如何将 Canvas 绘制的内容保存为图片，最近在做的东西刚好涉及了这块，通过本文来分享一下。

提到保存图片，很多人可能会想到 RepaintBoundary, 但它使用起来有点繁琐，同时也存在一些局限性。而且 Canvas 有更灵活的生成图片方式，没有必要使用 RepaintBoundary，下面一起来看看吧！

1. 自己创建 Canvas 对象

如果我问：

如何得到 Canvas 对象，来进行绘制操作?

可能绝大多数朋友都知道继承自 CustomPainter，在 paint 回调中获取 Canvas 对象，它是在 Flutter 框架中创建的。你有没有想过，我可不可以自己创建一个 Canvas 对象呢？

canvas 保存成图片,flutter,ui,android,ios

实例化对象，最重要的是 构造方法，可以进入 Canvas 源码中瞄一眼。可以看到它有一个构造方法，说明允许外界进行实例化。其中必须传入一个 PictureRecorder 对象；

canvas 保存成图片,flutter,ui,android,ios

而 PictureRecorder 类有无参构造，这样就为我们自己创建 Canvas 对象提供了可能性，代码如下：

dart void createCanvas(){ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); }

2. 得到 Picture 对象

可能很少人知道 Picture 对象，但它在框架层渲染机制中的出场率挺高，看过渲染小册的应该知道它。通过PictureRecorder#endRecording 可以得到 Picture 对象，期间 Canvas 绘制的内容将被记录到 Picture 中。比如下面绘制了 100*100 尺寸的蓝色盒子：

```dart import 'dart:ui' as ui;

void createCanvas(){ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); canvas.drawRect(Offset.zero&boxSize, Paint()..color=Colors.blue); Picture picture = recorder.endRecording(); } ```

生成图片的核心方法是 Picture 的 toImage 方法，可以异步生成 ui.Image 对象：

canvas 保存成图片,flutter,ui,android,ios

3. 存储图片

有了 ui.Image 对象，就可以得到图片的字节数组，存入到文件中即可：这里在 Windows 中测试的，其他平台也是类似。

canvas 保存成图片,flutter,ui,android,ios

``` import 'dart:ui' as ui;

void createCanvas() async{ PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); canvas.drawRect(Offset.zero&boxSize, Paint()..color=Colors.blue); Picture picture = recorder.endRecording(); ui.Image image = await picture.toImage(boxSize.width.toInt(), boxSize.height.toInt()); // 获取字节，存入文件 ByteData? byteData = await image.toByteData(format:ImageByteFormat.png ); if(byteData!=null){ File file = File(r"E:\Temp\desk\box.png"); file.writeAsBytes(byteData.buffer.asUint8List()); } } ```

通过这种方式绘制生成图片，好处是可以自由操作 Canvas 的绘制内容，而且必依赖于组件，只要在任何需要的地方触发方法即可。如下所示，在 FloatingActionButton 中触发 createCanvas 方法即可保存图片。

canvas 保存成图片,flutter,ui,android,ios

另外，这种方式还有另一个很大的优势，可以通过 canvas 的操作让图片放大，获得非常大尺寸的图片。比如将绘制内容放大 100 倍存储，这是 RepaintBoundary 无法做到的。还有 RepaintBoundary 无法获取到没有渲染到的内容，无法做到长屏图片的生成。而掌握 Canvas 我们可以控制一切。

4. CustomPainter 与 PictureRecorder

上面说了，可以在不显示的情况下将画板内容保存为图片。但很多时候，我们会通过 CustomPainter 先画出来，这时候如何通过保存 CustomPainter 类中绘制的内容呢？比如这里也就就有一个 ShapePainter，是一个 100*100 尺寸的蓝色盒子，上面放着半径 40 的红色边线圆：

canvas 保存成图片,flutter,ui,android,ios

现在想要点击按钮，将 ShapePainter 的绘制内容保存起来，该怎么办呢？在生成图片的地方再写一遍绘制逻辑吗？

``` class ShapePainter extends CustomPainter {

@override void paint(Canvas canvas, Size size) { Paint paint = Paint()..color = Colors.blue; canvas.drawRect(Offset.zero & size,paint ); paint..style=PaintingStyle.stroke..color=Colors.redAccent..strokeWidth=2; canvas.drawCircle(Offset(size.width/2 , size.height/2),40, paint); }

@override bool shouldRepaint(covariant CustomPainter oldDelegate) { return false; } } ```

其中仔细思考一下，上图红框的区域 canvas 的操作在 Picture 中留下 "痕迹"，而 CustomPainter 正好有个方法，可以操作一个 canvas 对象，于是乎：将 ShapePainter 作为成员变量，可以通过 _painter#paint 方法去操作自己创建的 Canvas 对象，从而在 Picture 中留下对应的 "痕迹"。

canvas 保存成图片,flutter,ui,android,ios

```dart // 作为成员变量 ShapePainter _painter = ShapePainter();

void createCanvas() async { PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder); Size boxSize = const Size(100, 100); // 通过 _painter 对象操作 canvas _painter.paint(canvas, boxSize); Picture picture = recorder.endRecording(); //略同... } ```

这里想说明一点： paint 虽然是 ShapePainter 类中覆写的方法，它会在框架中某些时机被触发(俗称回调)。但它本身仍是该对象的成员方法，可以通过对象来调用。不要固化思维，觉得回调的方法一定要等着被底层调用。

这样，任何的 CustomPainter 实现类都可以很容易地通过 PictureRecorder->Canvas->Picture 这套组合拳生成图片来保存：

canvas 保存成图片,flutter,ui,android,ios