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

Posted 2023-03-07

【中文标题】如何将多图像选择器与 Flutter Image Compress 一起使用？

【英文标题】：How to use Multi Image picker with Flutter Image Compress?

【发布时间】：2020-12-12 16:57:42

【问题描述】：

我已经成功实现了颤振多图像选择器。但我想降低它的质量。我见过有人说它使用 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)));
                      

【问题讨论】：

首先，使用多图像选择器获取图像。那么您需要将资产转换为文件。

然后将其提供给您的压缩图像函数

请@AbhishekGhaskata 现在检查一下。我更新了代码。它仍然没有压缩图像大小。先生，我做错了什么？

你必须通过 for 循环迭代 fileImageArray

@AbhishekGhaskata Bhai。请帮助我。不知道如何迭代它:(从昨天开始尝试:(

【参考方案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;
    );
   
  

【讨论】：

首先，您必须将 List 转换为 List 然后提供给 compressImage 方法

如果我将所有文件上传到 firebase，你能告诉我 srcPath 和目标路径是什么吗？

这里有来自 firebase firebase.flutter.dev/docs/storage/usage 的非常好的文档，可能会对您有所帮助