如何在 Flutter 中使用 multi_image_picker 调整图像大小？答案

【问题标题】：How to resize image using multi_image_picker in Flutter?如何在 Flutter 中使用 multi_image_picker 调整图像大小？
【发布时间】：2020-06-04 06:21:09
【问题描述】：

我正在使用multi_image_picker 包来选择图像并上传到服务器，但在上传之前我想调整图像大小。我正在尝试使用dart.ui 来完成它，但遇到了问题：

//assets is List<Asset> from MultiImagePicker.pickImages
 assets.forEach((asset) {
      Future<ByteData> byteData = asset.getByteData();
      byteData.then((d) async {
        List<int> imageData = d.buffer.asUint8List();
        String b64 =base64Encode(imageData);
        print(b64); // prints [/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE...
        //if i send b64 to server then decode it and save as img it's working well

  //Resize
    ui.instantiateImageCodec(imageData,targetHeight: 800, targetWidth: 600)
        .then((codec) {
      codec.getNextFrame().then((frameInfo) async {
        ui.Image i = frameInfo.image;
        ByteData bytes = await i.toByteData();
        List<int> resizedImageData = bytes.buffer.asUint8List();
        String rb64 = base64Encode(resizedImageData);
        print(rb64); // prints too many backslashes:[k5KO/5qWk/+ZlZL/mpaT/5uXlP+alpP/mJSR/5iUkf+YlJH/mZSR/5uWk/+blpP/n5qX/6GcmP+gm5f/oZyY/6GcmP+fmpb/nZi..
        //If i send rb64 to server then server cannot decode and save it.
      });
    });
  });
});

【问题讨论】：

第一个重要的问题是 Flutter 是在移动端还是在 Web 端？在手机上，它工作得很好。在网络上，我目前有大约三个错误报告，暂时无法解决，但我希望它会很快得到修复。 :-)
我最终使用pub.dev/packages/flutter_native_image 来调整大小

标签： flutter dart

【解决方案1】：

这是我通常用来调整大小的函数：

import 'dart:ui' as skia;

Future<skia.Image> resizeImage(String path, {int width, int height}) async {
  Uint8List data = await File(path).readAsBytes();
  final codec = await skia.instantiateImageCodec(data, targetWidth: width, targetHeight: height);
  final frame = await codec.getNextFrame();
  return frame.image;
}

正如我在评论中提到的，这目前在 Flutter Web 中不起作用，但这是由于一个错误很快就会修复，希望如此。

【讨论】：

如何从调整大小的 ui.Image 中获取 Uint8List 以将其编码为 base64 以将其发送到服务器？我认为我的问题中的代码与您的代码相同，除了编码部分。
是的，使用toByteData()。我看不出你的代码有什么问题。你有具体的问题吗？请注意，toByteData()，除非您提供格式，否则将返回原始 RGBA 位图，而不是 PNG 或 JPG 或类似的，因此您必须在服务器上对其进行处理。