如何从网络图像中获取 Flutter Uint8List？

Posted 2023-02-22

【中文标题】如何从网络图像中获取 Flutter Uint8List？

【英文标题】：How to get a Flutter Uint8List from a Network Image?

【发布时间】：2019-04-10 11:17:36

【问题描述】：

我正在尝试将网络图像转换为文件，其中的第一部分是将其转换为 Uint8List。这是我如何使用我的 1 个资产图像执行此操作...

      final ByteData bytes = await rootBundle.load('assests/logo');
      final Uint8List list = bytes.buffer.asUint8List();

      final tempDir = await getTemporaryDirectory();
      final file = await new File('$tempDir.path/image.jpg').create();
      file.writeAsBytesSync(list);

我如何使用Image.network(imageUrl.com/image) 做到这一点

【参考方案1】：

使用图像 url 和 response.bodyBytes 获取 http 响应的最简单方法似乎是包含 Uint8List 中的数据。

http.Response response = await http.get(
    'https://flutter.io/images/flutter-mark-square-100.png',
);   
response.bodyBytes //Uint8List

现在您可以执行转换为 base64 编码字符串 base64.encode(response.bodyBytes); 等操作更新：使用较新版本的 http，您需要添加 Uri.parse() 例如。

http.Response response = await http.get(
    Uri.parse('https://flutter.io/images/flutter-mark-square-100.png'),
);

【讨论】：

使用此方法获取文件为 File file = File.fromRawPath(uint8list);我收到以下错误：解析图像编解码器时引发了以下 FileSystemException：无法打开文件，路径 = '.....'

【参考方案2】：

  void initState() 
    super.initState();
    var sunImage = new NetworkImage(
        "https://resources.ninghao.org/images/childhood-in-a-picture.jpg");
    sunImage.obtainKey(new ImageConfiguration()).then((val) 
      var load = sunImage.load(val);
      load.addListener((listener, err) async 
        setState(() => image = listener);
      );
    );
  

另见https://github.com/flutter/flutter/issues/23761#issuecomment-434606683

那么你可以使用image.toByteData().buffer.asUInt8List()

另见https://docs.flutter.io/flutter/dart-ui/Image/toByteData.html

【讨论】：

我正在重新审视您的答案，现在我在使用以下代码时收到缓冲区错误，它不是为 ByteData 定义的...final Uint8List list = image.image.toByteData().buffer.asUInt8List();。我错过了什么吗？请帮忙。

@CharlesJr image.image.toByteData() 返回 Future。 ByteData data = await mage.image.toByteData(); data.buffer.asUInt8List();

sunImage.load(val) 有错误。该错误是预期的 2 个位置参数，但找到了 1 个。我能知道怎么解决吗？

似乎 API 已更改。检查 load 函数期望的第二个参数 id。

@syonip 更多细节会有所帮助。有任何错误信息吗？

【参考方案3】：

这里的答案是相关的，有助于解释 dart 和颤振图像压缩/转换的工作原理。如果你想要一个捷径，有这个包https://pub.dev/packages/network_image_to_byte 让它变得非常简单。

【参考方案4】：

尝试了几个小时后，这对我有帮助

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path/path.dart' as path;
import 'package:path_provider/path_provider.dart';

Future<File> getFileFromNetworkImage(String imageUrl) async 
  var response = await http.get(imageUrl);
  final documentDirectory = await getApplicationDocumentsDirectory();
  String fileName = DateTime.now().millisecondsSinceEpoch.toString();
  File file = File(path.join(documentDirectory.path, '$fileName.png'));
  file.writeAsBytes(response.bodyBytes);
  return file;


final file = await getFileFromNetworkImage("<your network image Url here>");

注意：这也会将 mp4 视频转换为文件。

originally answered here

【参考方案5】：

由于 http 需要 Uri，这会有所帮助： 您应该首先从 ImageAddress 中删除起始 serverAddress ： 在我的情况下，我的网址中有 3001：

    String serverAddress = 'myAddress.com:3001';
    int indexOf3001 = imageAddress.indexOf('3001');
    String trimmedImageAddress= imageAddress.substring(indexOf3001 + 4);

然后：

    var imageUrl = Uri.https(serverAddress, trimmedImageAddress);
    final http.Response responseData = await http.get(imageUrl);
    Uint8List imageBytes = responseData.bodyBytes;

这也适用于设备和网络，希望对您有所帮助。

【参考方案6】：

我想出了一个不同的解决方案。希望它可以帮助某人。

import 'dart:typed_data';
import 'package:flutter/services.dart';

Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imageUrl))
            .load(imageUrl))
            .buffer
            .asUint8List();