Flutter 学习 对 图片文件的操作

图片间格式的转换等操作

图片文件转换成Base64

转换思路 File=>Uint8List =>Base64
使用场景:有些接口需要多图片上传使用base64进行多组图片上传操作

  ///文件转 Uint8List
  static file2Uint8List(File file) async {
    Uint8List imageBytes = await file.readAsBytes();
    return imageBytes;
  }
  /// unit8List 转base64
  static uint8List2Base64(Uint8List uint8list) {
    String base64 = base64Encode(uint8list);
    return base64;
  }

Base64转dart.ui中的Image

使用场景:从接口获取的base64要画在Canvas上需要转换的格式

import 'dart:ui' as ui;
  ///base64 转成需要的Image文件 这个Image是UI 下面的Image和Image widget不同 !!!
  ///[asset] base64 无头字符串
  ///[width]宽度
  ///[height] 高度
  static Future base64ToImage(String asset, {width, height}) async {
    Uint8List bytes = base64Decode(asset);
    ui.Codec codec = await ui.instantiateImageCodec(bytes,
        targetWidth: width, targetHeight: height);
    ui.FrameInfo fi = await codec.getNextFrame();
    return fi.image;
  }

用Canvas绘画

用 recorder 记录绘画的结果保存Picture

    ///canvas的记录工具 用来保存canvas的
    final recorder = ui.PictureRecorder();

    ///canvas 绘图工具
    Canvas canvas = Canvas(recorder);

    ///画笔 颜色为传入颜色 状态是填充
    Paint paint = Paint();
    paint.color = bgColor;
    paint.style = PaintingStyle.fill;

    ///底下跟我画个背景
    canvas.drawRect(Rect.fromLTWH(0, 0, width, height), paint);

    ///顶上再画个人
    paint.color = Colors.black;
    paint.style = PaintingStyle.stroke;
    paint.strokeWidth = 10;
    ui.Image image = await base64ToImage(imageFile,
        width: width.toInt(), height: height.toInt());
    canvas.drawImage(image, Offset.zero, paint);
    // 转换成图片
    ///记录画的canvas
    Picture picture = recorder.endRecording();

将Picture 转换成ByteData

最终转换成 Uint8List 显示在屏幕上

  ///获取到的picture 转换成 ByteData
  ///[picture] canvas画然后记录的文件
  ///[width] 宽度
  ///[height] 高度
  static Future picture2ByteData(
      ui.Picture picture, double width, double height) async {
    ui.Image img = await picture.toImage(width.toInt(), height.toInt());

    debugPrint('img的尺寸: $img');

    ByteData? byteData = await img.toByteData(format: ui.ImageByteFormat.png);

    return byteData;
  }

将ByteData 转成 Uint8List

作用是可以显示在ImageWidget上 或者后续转成Base64 或者直接保存到本地

/// 将ByteData 转成 Uint8List
  /// [data] ByteData数据
  /// return [Uint8List] Uint8List
  static byteData2Uint8List(ByteData data) {
    return data.buffer.asUint8List();
  }