前语

日月如梭，《Flutter 制作指南 – 妙笔生花》 转眼间现已发布两年半了，不知道各位练习得怎么样。有不少朋友问过怎么将 Canvas 制作的内容保存为图片，最近在做的东西刚好触及了这块，经过本文来共享一下。

说到保存图片，很多人或许会想到 RepaintBoundary, 但它运用起来有点繁琐，一起也存在一些局限性。并且 Canvas 有更灵敏的生成图片办法，没有必要运用 RepaintBoundary，下面一起来看看吧！

1. 自己创立 Canvas 目标

如果我问：

怎么得到 Canvas 目标，来进行制作操作?

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

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

实例化目标，最重要的是 结构办法，能够进入 Canvas 源码中瞄一眼。 能够看到它有一个结构办法，说明答应外界进行实例化。其中有必要传入一个 PictureRecorder 目标；

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

而 PictureRecorder 类有无参结构，这样就为咱们自己创立 Canvas 目标提供了或许性，代码如下：

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

2. 得到 Picture 目标

或许很少人知道 Picture 目标，但它在框架层烘托机制中的出场率挺高，看过烘托小册的应该知道它。 经过PictureRecorder#endRecording 能够得到 Picture 目标，期间 Canvas 制作的内容将被 记录 到 Picture 中。比方下面制作了 100*100 尺度的蓝色盒子：

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 目标：

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

3. 存储图片

有了 ui.Image 目标，就能够得到图片的字节数组，存入到文件中即可：这里在 Windows 中测试的，其他渠道也是相似。

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

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 办法即可保存图片。

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

别的，这种办法还有另一个很大的优势，能够经过 canvas 的操作让图片扩大，取得非常大尺度的图片。比方将制作内容扩大 100 倍存储，这是 RepaintBoundary 无法做到的。还有 RepaintBoundary 无法获取到没有烘托到的内容，无法做到长屏图片的生成。而把握 Canvas 咱们能够控制一切。

4. CustomPainter 与 PictureRecorder

上面说了，能够在不显示的情况下将画板内容保存为图片。但很多时分，咱们会经过 CustomPainter 先画出来，这时分怎么经过保存 CustomPainter 类中制作的内容呢？比方这里也就就有一个 ShapePainter，是一个 100*100 尺度的蓝色盒子，上面放着半径 40 的红色边线圆：

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

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

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

// 作为成员变量
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 这套组合拳生成图片来保存：

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

5. 制作永无止境

制作自身是一个发明过程，而发明是没有上限的。将 Canvas 保存为图片，能够让你发明的、在界面上的出现物，转化为可传输的图片资源。让它能够脱离 Flutter 制作系统，经过图片展现在任何设备屏幕上。经过 Canvas 制作能够完结很多事：

比方，经过 制作+手势 能够操作图片，进行裁剪图像，最终根据矩形区域运用上面的办法，将选取的局部图片制作到自己创立的画板上，保存为图片。

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

别的，截图、图片编辑器也少不了制作的技术，箭头、根本图形、文字都是在图片之上制作的内容。最终保存图片时也都能够运用上面的办法。

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

最终，比方的这种共享的卡片图片，也能够经过制作来处理，共享时本质上是共享图片。保存图片也是上面 PictureRecorder->Canvas->Picture 这套组合拳。

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

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

本文正在参与「金石方案」