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

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