Flutter: How to use "Multi Image Picker" to reduce image quality and get output as "File"?

user_1379286 0
Viewed 3027

I am using Flutter package to multi select images. Below is my code

List<Asset>localAssetList = [];//new

localAssetList = await MultiImagePicker.pickImages(
        maxImages: 5,
        enableCamera: true,
        
       selectedAssets: localAssetList,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );

I want to reduce the image quality by 60% in every image, then get the results as List<File>. How can I do this?

flutter-dependencies flutter android ios
3 Answers

You can do something as below:

  _getImageList() async {
    var resultList = await MultiImagePicker.pickImages(
      maxImages: 6,
      enableCamera: true,
    );

    // The data selected here comes back in the list
    for (var imageFile in resultList) {
      await postImage(imageFile).then((downloadUrl) {
        // Get the download URL and do your stuff here
      }).catchError((err) {
        print(err);
      });
    }
  }

And in postImage function, you can resize each image and change its quality.

Future<dynamic> postImage(Asset imageFile) async {
    double imageDesiredWidth = 500;

    double getAspectRatio(double originalSize, double desiredSize) => desiredSize / originalSize;
    final aspectRatio = getAspectRatio(imageFile.originalWidth.toDouble(), imageDesiredWidth);
    ByteData byteData = await imageFile.getThumbByteData(
        (imageFile.originalWidth * aspectRatio).round(),
        (imageFile.originalHeight * aspectRatio).round(),
        quality: 85
    );

    String fileName = DateTime
        .now()
        .millisecondsSinceEpoch
        .toString();
    StorageReference reference = _storage.ref().child(fileName);
    StorageUploadTask uploadTask =
    reference.putData(byteData.buffer.asUint8List());
    StorageTaskSnapshot storageTaskSnapshot = await uploadTask.onComplete;
    return await storageTaskSnapshot.ref.getDownloadURL();
  }
user_70852740

First, multi_image_picker is deprecated. Use multi_image_picker2.

There are 2 ways of doing this as of October 2021.

First Way

Use flutter_image_compress library as following. Here I am using Uint8List but you can use File as well.

Future<Uint8List> compressUintImage(Uint8List list) async {
    var result = await FlutterImageCompress.compressWithList(
      list,
      minHeight: 1920,
      minWidth: 1080,
      quality: 96,
    );
    print(list.length);
    print(result.length);
    return result;
  }

Second Way

ByteData byteData = await file.getByteData(quality: 100);

This is by using the multi_image_picker2 itself. Here the file is an Asset.

user_13792860

There's a nice library you can use on this case: flutter_image_compress.

First add the dependency:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  flutter_image_compress: ^0.7.0

Import it

import 'package:flutter_image_compress/flutter_image_compress.dart';

And for using it, you can use this method:

void compressImage(File file) async {
    // Get file path
    // eg:- "Volume/VM/abcd.jpeg"
    final filePath = file.absolute.path;
    
    // Create output file path
    // eg:- "Volume/VM/abcd_out.jpeg"
    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);
}

You can find more about Flutter Image Compress here: https://pub.dev/packages/flutter_image_compress. Let me know if this solves your problem.

user_40775590
Related