flutter canvas绘制 生成图片

本文中2,3提供了俩种转换图片的方法,如果大家有更好的方法希望互相沟通

1.drawImage介绍

flutter中的drawImage第一个参数是Image,这个Image不是Widget而是一个Uint8List 格式的图片流。

2.支持本地图片转换成Uint8List的方法;
  Future<ui.Image> getImage(String asset) async {
    ByteData data = await rootBundle.load(asset);
    Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
    FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }
3.同时支持网络图片和本地图片换成Uint8List的方法;

这个方法需要传入俩个参数(path:图片的地址(网络/本地),isUrl:是否是网络图片)

  static Future<ui.Image> loadImage(var path, bool isUrl) async {
    ImageStream stream;
    if (isUrl) {
      stream = NetworkImage(path).resolve(ImageConfiguration.empty);
    } else {
      stream = AssetImage(path, bundle: rootBundle)
          .resolve(ImageConfiguration.empty);
    }
    Completer<ui.Image> completer = Completer<ui.Image>();
    void listener(ImageInfo frame, bool synchronousCall) {
      final ui.Image image = frame.image;
      completer.complete(image);
      stream.removeListener(ImageStreamListener(listener));
    }

    stream.addListener(ImageStreamListener(listener));
    return completer.future;
  }

4.点击按钮生成图片并且预览
RaisedButton(
              onPressed: () async {
                var pictureRecorder = new ui.PictureRecorder(); // 图片记录仪
                var canvas = new Canvas(pictureRecorder); //canvas接受一个图片记录仪
                var images = await getImage('asset/image/defaultBg.jpg'); // 使用方法获取Unit8List格式的图片
                print(images);
                Paint _linePaint = new Paint()
                  ..color = Colors.blue
                  ..style = PaintingStyle.fill
                  ..isAntiAlias = true
                  ..strokeCap = StrokeCap.round
                  ..strokeWidth = 30.0;

                // 绘制图片
                canvas.drawImage(images, Offset(0, 0), _linePaint); // 直接画图

                // 绘制圆圈
                canvas.drawCircle(
                    new Offset(
                      60,
                      images.height.toDouble() + 60,
                    ),
                    40.0,
                    _linePaint);

                // 绘制文字
                ui.ParagraphBuilder pb = ui.ParagraphBuilder(ui.ParagraphStyle(
                    textAlign: TextAlign.left,
                    fontWeight: FontWeight.w400,
                    fontStyle: FontStyle.normal,
                    fontSize: 25.0));
                pb.pushStyle(ui.TextStyle(color: Colors.black));
                pb.addText('有一种感动就做只有你懂');
                pb.addText('一个可以钻钱的app');
                // 设置文本的宽度约束
                ParagraphConstraints pc = ui.ParagraphConstraints(width: 400);
                ui.Paragraph paragraph = pb.build()..layout(pc);
                canvas.drawParagraph(
                    paragraph, Offset(120, images.height.toDouble() + 20));


              //下面的代码是生成图片的关键代码,以上绘制文字和圆圈的代码可以忽略不计
                var picture = await pictureRecorder.endRecording().toImage(750, 1334);//设置生成图片的宽和高
                var pngImageBytes = await picture.toByteData(format: ui.ImageByteFormat.png);
                // var imgBytes = Uint8List.view(pngImageBytes.buffer); //这一行和下面这一行都是生成Uint8List格式的图片(原理还不知道)
                Uint8List pngBytes = pngImageBytes.buffer.asUint8List();
                print(pngBytes);//pngBytes可以放在Image.memory()中预览
                setState(() {
                  imageMemory = pngBytes;
                });
              },
              child: Text('生成海报'),
            ),

推荐阅读更多精彩内容

  • 目录 一、Flutter 为何使用Dart开发语言二、Flutter的UI系统1.特点2.架构简介2.1 Flut...
    高家二少爷阅读 2,901评论 3 27
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 3,660评论 1 15
  • 谈钱伤感情,谈感情伤钱!这是赤裸裸的现实。这辈子辜负谁都不会辜负我!说到更要做的到!
    CiciCherry阅读 84评论 0 0
  • 跃迁 读书笔记 1010/6 326--394 我的话: 聪明人的最大诅咒——贪婪而不专注。 聪明人机会多,诱惑...
    宁静致远的猫阅读 98评论 0 0
  • Monkey:Android SDK自带的一个命令行工具,使用adb来运行它,向系统发送伪随机的用户事件流,如按键...
    念旧ii阅读 194评论 0 0