Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片

---

theme: cyanosis

前言

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

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

---

1. 自己创建 Canvas 对象

如果我问：

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

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

---

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

而 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 对象：

---

3. 存储图片

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

``` 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 的操作让图片放大，获得非常大尺寸的图片。比如将绘制内容放大 100 倍存储，这是 RepaintBoundary 无法做到的。还有 RepaintBoundary 无法获取到没有渲染到的内容，无法做到长屏图片的生成。而掌握 Canvas 我们可以控制一切。

---

4. CustomPainter 与 PictureRecorder

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

现在想要点击按钮，将 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 中留下对应的 "痕迹"。

```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 这套组合拳生成图片来保存：

---

5. 绘制永无止境

绘制本身是一个创造过程，而创造是没有上限的。将 Canvas 保存为图片，可以让你创造的、在界面上的呈现物，转化为可传输的图片资源。让它可以脱离 Flutter 绘制体系，通过图片展示在任何设备屏幕上。通过 Canvas 绘制可以完成很多事：

比如，通过 绘制+手势 可以操作图片，进行裁剪图像，最终根据矩形区域使用上面的方式，将选取的局部图片绘制到自己创建的画板上，保存为图片。

另外，截图、图片编辑器也少不了绘制的技能，箭头、基本图形、文字都是在图片之上绘制的内容。最终保存图片时也都可以使用上面的方式。

最后，比如掘金的这种分享的卡片图片，也可以通过绘制来处理，分享时本质上是分享图片。保存图片也是上面 PictureRecorder->Canvas->Picture 这套组合拳。

---

总的来看， Canvas 保存成图片的过程非常简单，也就十几行代码。但对于很多人来说，不知道就做不出来，让更多人知道一些力所能及知识，这也是分享的意义所在。希望本文可以在你想要保存绘制成图片时，对你有所帮助。那本文就到这里，谢谢观看 ~

本文正在参加「金石计划」