c# - 如何从 .NET API 接收图像文件并将其显示在 Dart Flutter 应用程序中？

问题描述

我从我的 Dart Flutter 应用程序中的 .NET Core API 接收到一个字节字符串形式的图像文件。然后我将编码String为List<int>. 我通过了List<int>toImage.memory()但图像没有出现并且没有抛出异常。

这是为了在 Dart Flutter 应用程序中显示从 .NET Core API 加载的图像。我已经尝试过utf8.encode()，String.runes和String.codeUnits（utf-16）。但是当我通过List<int>to时没有任何工作Image.memory()。

Dart Flutter 模型类使用fromJson()从 .NET API 接收的 JSON 中的图像字节字符串编码方法：

class SelfMonitorPhotoModel {


  String id;
  String name;
  List<int> bytes;
  SelfMonitorPhotoMetaData metaData;

  SelfMonitorPhotoModel({
    this.id,
    this.name,
    this.bytes,
    this.metaData
  });


  factory SelfMonitorPhotoModel.fromJson(Map<String, dynamic> json) {
    var bytesString = json["bytes"] as String;
    List<int> bytesList = utf8.encode(bytesString);
    print(bytesList);

    return SelfMonitorPhotoModel(
      id: json["id"],
      bytes: bytesList,
      metaData: SelfMonitorPhotoMetaData.fromJson(json["metaData"]),
      name: json["name"]
    );
  }

  Map<String, dynamic> toJson() => {
    "Id": id,
    "Name": name,
    "MetaData": metaData,
    "bytes": bytes
      };

}

尝试将字节显示为图像Image.memory()：

@override
  Widget build(BuildContext context) {
    displayHeight = MediaQuery.of(context).size.height;
    displayWidth = MediaQuery.of(context).size.width;
    return Container(
        margin: EdgeInsets.only(top: displayHeight * 0.025),
        child: Stack(
          children: <Widget>[
            Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Spacer(flex: 1),
                  Expanded(
                    flex: 18,
                    child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(
                                Radius.circular(displayWidth * 0.025)),
                            boxShadow: [
                              BoxShadow(
                                  blurRadius: displayWidth * 0.05,
                                  color: Color.fromRGBO(0, 0, 0, 0.5),
                                  offset: Offset(displayWidth * 0.01,
                                      displayWidth * 0.025))
                            ]),
                        child: ClipRRect(
                            borderRadius: BorderRadius.all(
                                Radius.circular(displayWidth * 0.025)),
                            child: Image.memory(
                              widget.photo.bytes
                            ))),
                  ),
                  Spacer(flex: 1),
                ]),
            Column(
              children: <Widget>[],
            )
          ],
        ));
  }

图像文件字节是byte[]C# .NET API 代码中的类型，在 JSON 中写为字符串：

// Controller action returning the photo/ image model.
[HttpGet("Photos/TaskId/{taskId}")]
        public async Task<IActionResult> GetPhotosByTaskId(string taskId)
        {
            try
            {
                return Ok(await _selfMonitorService.GetPhotosByTaskId(taskId));
            }
            catch (Exception e)
            {
                _logger.Error($"{e.Message} | {e.StackTrace}");
                return BadRequest();
            }
        }

// The model class returned from the API containing the image file bytes.
public class SelfMonitorPhotoModel
    {

        public string Id { get; set; }

        public string Name { get; set; }
        public byte[] Bytes { get; set; }
        public SelfMonitorPhotoMetaData MetaData { get; set; }

    }

我希望图像能够显示在 Dart Flutter 应用程序中。但它不显示，也没有抛出异常。

标签： c#flutter

c# - 如何从 .NET API 接收图像文件并将其显示在 Dart Flutter 应用程序中？

问题描述

解决方案

推荐阅读