【问题标题】:How to get a Flutter Uint8List from a Network Image?如何从网络图像中获取 Flutter Uint8List?
【发布时间】: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) 做到这一点

【问题讨论】:

    标签: image file dart flutter byte


    【解决方案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() 返回 FutureByteData 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();
          

          【讨论】:

            猜你喜欢
            • 2020-05-10
            • 1970-01-01
            • 2020-09-19
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2012-05-29
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多