image - 如何在 Flutter 中显示字节数据中的图像

Question

我的项目有两个方面。一个是我们使用 OpenCV 的相机，以 8 位 3 channel (R，G，B)捕获帧，格式化并将其写入套接字以进行流式传输。图像的分辨率为 640 x 480，因此将 640x480x3 字节写入套接字。

在另一端，我有一个正在监听此套接字的 Flutter 应用程序。我能够成功收集字节，但无法使用它们重构图像。我怎样才能做到这一点？我正在分享我目前所拥有的，但我无法显示任何视觉效果。

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:ferenova_flutter_app/plan_display_page/plan_display_page.dart';
import 'package:ferenova_flutter_app/vars.dart' as vars;

import 'dart:io';

// ignore: must_be_immutable
class CameraStreamPage extends StatefulWidget {
  PlanDisplayPageState pdps;
  Socket socket;
  String title;

  CameraStreamPage(
    String title,
    PlanDisplayPageState pdps,
  ) {
    this.title = title;
    this.pdps = pdps;
  }

  @override
  _CameraStreamPage createState() => _CameraStreamPage();
}

class _CameraStreamPage extends State<CameraStreamPage> {
  // VlcPlayerController _vlcViewController;
  PlanDisplayPageState pdps;
  Socket socket;
  Image img;
  Uint8List bytes;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pdps = widget.pdps;
    this.socket = widget.socket;

    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    Socket.connect(vars.streamIP, int.parse(vars.streamPORT))
        .then((Socket sock) {
      socket = sock;
      socket.listen(dataHandler,
          onError: errorHandler, onDone: doneHandler, cancelOnError: false);
    }).catchError((Object e) {
      print("Unable to connect: $e");
    });
  }

  void dataHandler(data) {
    String str = new String.fromCharCodes(data).trim();
    print(str);

    vars.picture += str;
    int lim = 640 * 480 * 3;
    if (vars.picture.length >= (640 * 480 * 3)) {
      bytes = Uint8List.fromList(vars.picture.codeUnits);
      print('BBBBBBBBBBBBBBBBB: ' + bytes.length.toString());
      setState(() {
        img = new Image.memory(
          bytes,
          width: 640,
          height: 480,
          scale: 1,
          fit: BoxFit.contain,
        );
        vars.picture = vars.picture.substring(lim);
      });
    }
  }

  void errorHandler(error, StackTrace trace) {
    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    print('ERRORORORORORORORROROROR');

    print(error);
  }

  void doneHandler() {
    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    print('DONEDONEDONEDONEDONEDONE');
    vars.picture = '';
    socket.destroy();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      // child: SingleChildScrollView(
      child: Container(
        width: 1000,
        height: 600,
        color: Colors.green[400],
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: 900,
              height: 550,
              color: Colors.purple,
              child: img,
            ),
          ],
        ),
      ),
    );
  }
}

下面是我收到的一部分:

P]rP]rT\rU^sX^tY_uYcvXbuVcsTaqP^lP^lR_mP^lR_mR_mU^jU^jS]iR\hQYjS[lR\oT]pT]pT]pR]mR]mR]mR]mU_pU_pU`nU`nYar[ctZd{]hYiaqhzw¤¡ §«©ª¨ ¬£ ¬£ ª¢ ª¢¡©¡© ¨§§§¢¥¢¥££¡¤¡¤¢¢¢¢¢¢  ¢¢¢¢¢¢         ¢¢¢¢¢¢   ¢¢£¢¡  ¡¡¡ ¡¢¢¢¢£¢£££££¤¤£¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¥¦¦ § § §¦¦ § §¡¨¢ §¡ §¡ §¡ §¡ §¡ §¡¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¢©£¢©£¤ª¤¤ª¤¤ª¤¤ª¤¢©£¡¨¢¢©£¢©£¢©£¤ª¤¥«¦¥«¦¤ª¤¤ª¤¤«£¤«£¤«£¤«£¨ª£¨ª£¨ª£¨ª£¨©¤¨©¤¨©

 ¡¡¡ ¡¡    .'/,$,-&..'/0(33+5MGM`Z_OFE&)!,$!*#$+$%.&)/'*/&,.%+*!'*!',$*+"(*!'*!'("')#()#('!&/).7164.13-0.(+,&),%+)#()"*(!)' ()"**#+.'/3.65085166288286054-31+1.'--&,/&,.%+.%+/&,2)/5,26-38/5:28:28:28=4:=4:<398045-02*.0(+,$(,$(+#'+#'+#'( #'"( #+#'+#')#()#(*$*,%+-)..*/,(-*&+,(-,(-,(--).-(0+&.*%,*%,'"*($+'"*'"**%,+&.+',,(-.'-.'-.'-.'-/).-&,-&,.'-.'-.'-/).-&,,%+,%+.'-.'-/'*+#'*

Answer 1

你可以试试这个

Image.memory(Uint8List.fromList(YOUR_BYTES));