如何将多图像选择器与 Flutter 图像压缩一起使用？

Question

我已经成功实现了 flutter 多图像选择器。 但我想降低它的质量。 我见过据说使用 flutter_Image_compress 库的线程。 但我似乎无法理解如何使用多图像选择器来实现它。

多图像选择器

Future<List<Asset>> loadAssets() async {
List<Asset> resultList = List<Asset>();
String error = "No error Detected";

try {
  resultList = await MultiImagePicker.pickImages(
    maxImages: 10,
    enableCamera: true,
    selectedAssets: images,
    cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
    materialOptions: MaterialOptions(
      actionBarColor: "#abcdef",
      actionBarTitle: "Upload Image",
      allViewTitle: "All Photos",
      useDetailsView: false,
      selectCircleStrokeColor: "#000000",
    ),
  );

  showInSnackBar("loading images");
  print(resultList.length);
  print((await resultList[0].getThumbByteData(122, 100)));
  print((await resultList[0].getByteData()));
  print((await resultList[0].metadata));
  print("loadAssets is called");

} on Exception catch (e) {
  error = e.toString();
  print(error);
}



if (!mounted){
  print("Not mounted");
}
else {
  setState(() {
    images = resultList;
    _error = error;
  });
}

return images;

}

Flutter 图片压缩

  void compressImage(File file) async {
    final filePath = file.absolute.path;
    final lastIndex = filePath.lastIndexOf(new RegExp(r'.jp'));
    final splitted = filePath.substring(0, (lastIndex));
    final outPath = "${splitted}_out${filePath.substring(lastIndex)}";

    final compressedImage = await FlutterImageCompress.compressAndGetFile(
        filePath,
        outPath,
        minWidth: 1000,
        minHeight: 1000,
        quality: 70);
  }

这就是我所做的

Future<List<Asset>> loadAssets() async {
    List<Asset> resultList = List<Asset>();
    List<File> fileImageArray=[];
    String error = "No error Detected";

    try {

      resultList = await MultiImagePicker.pickImages(
        maxImages: 10,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Upload Image",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),

      );
      resultList.forEach((imageAsset) async {
        final filePath = await FlutterAbsolutePath.getAbsolutePath(imageAsset.identifier);

        File tempFile = File(filePath);
        if (tempFile.existsSync()) {
          fileImageArray.add(tempFile);
        }
      });
compressImage(fileImageArray);

      showInSnackBar("loading images");
      print(resultList.length);
      print((await resultList[0].getThumbByteData(122, 100)));
      print((await resultList[0].getByteData()));
      print((await resultList[0].metadata));
      print("loadAssets is called");

    } on Exception catch (e) {
      error = e.toString();
      print(error);
    }
    if (!mounted){
      print("Not mounted");
    }
    else {
      setState(() {
        print('Presed1');
        images = resultList;
        _error = error;
      });
    }

    return images;
  }

  void compressImage(fileImageArray) async {
    for(var i in fileImageArray){
      final filePath = i.absolute.path;
      final lastIndex = i.lastIndexOf(new RegExp(r'.jp'));
      final splitted = i.substring(0, (lastIndex));
      final outPath = "${splitted}_out${filePath.substring(lastIndex)}";

      final compressedImage = await FlutterImageCompress.compressAndGetFile(
          filePath,
          outPath,
          minWidth: 240,
          minHeight: 240,
          quality: 5);
      setState(() {
   print('pressed2');
        fileImageArray= compressedImage;
      });
    }

}

onPressed: () async {
                        List<Asset> asst = await loadAssets();
                        if (asst.length == 0) {
                          showAlert("No images selected");
                        }
                        SizedBox(height: 10,);

                        showInSnackBar('Images Successfully loaded');
                        //                 SnackBar snackbar = SnackBar(content: Text('Please wait, we are uploading'));
                        //_scaffoldKey.currentState.showSnackBar(new SnackBar(content: new Text(value)));
                      }

Answer 1

请使用它来将列表转换为列表

List<File> fileImageArray=[];
...
resultList.forEach((imageAsset) async {
    final filePath = await FlutterAbsolutePath.getAbsolutePath(imageAsset.identifier);
    
    File tempFile = File(filePath);
    if (tempFile.existsSync()) {
        fileImageArray.add(tempFile);
    }
});

fileImageArray提供给 compressImage 方法。 并使用 for 循环对其进行迭代

 void compressImage(fileImageArray) async {
    for(var i in fileImageArray){
    final filePath = i.absolute.path;
    final lastIndex = i.lastIndexOf(new RegExp(r'.jp'));
    final splitted = i.substring(0, (lastIndex));
    final outPath = "${splitted}_out${filePath.substring(lastIndex)}";

    final compressedImage = await FlutterImageCompress.compressAndGetFile(
        filePath,
        outPath,
        minWidth: 240,
        minHeight: 240,
        quality: 5);
    setState(() {
      fileImageArray= compressedImage;
    });
   }
  }

Answer 2

Flutter Absolute Path 不再开发，也没有使用 android v2 嵌入进行更新。 因此，我建议在下面使用path_provider将资产转换为文件并压缩：

import 'package:multi_image_picker/multi_image_picker.dart';
import 'package:path_provider/path_provider.dart';

Future<File> compressAndUploadAssetImage(Asset asset, Reference ref) async {
        final byteData = await asset.getByteData();
        final tempFile = File("${(await getTemporaryDirectory()).path}/${asset.name}");
        final file = await tempFile.writeAsBytes(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes),);
        File compressedFile = await FlutterNativeImage.compressImage(file.path, quality: 70);
        return compressedFile;

    }