flutter web : When I image upload to storage, I can't control the quality of the image picker

Question

The sdk that I use is as follows.

  sdk: ">=2.7.0 <3.0.0"
  image_picker: ^0.6.7 
  image_picker_for_web: ^0.1.0
  firebase_storage: ^3.1.6
  cloud_firestore: ^0.13.7

When uploading an image to storage, I try to reduce the size of the image file. And this is the code for image upload.

import 'package:image_picker/image_picker.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:omd_test/widget/custom_loading.dart';

class TestScreen extends StatefulWidget {
  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  PickedFile _image;
  String imageUrl;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Scaffold(
          appBar: AppBar(
            title: Text("TEST"),
          ),

          body: Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              children: [
                Container(
                    width: 200,
                    height: 200,
                    child: _image == null
                        ? Container()
                        : Image.network(
                            _image.path,
                          )),
                TextButton(
                    onPressed: () {
                      _getImagesPicker();
                    },
                    child: Text(
                      "Pick",
                      style: TextStyle(color: Colors.black),
                    )),
                SizedBox(
                  height: 20,
                ),
                TextButton(
                    onPressed: () async {
                      if (_image != null) {
                        await imageUpload(_image);

                        setState(() {
                          _image = null;
                        });

                      } else
                        print("No Image");
                    },
                    child: Text(
                      "Upload"
                    )),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _getImagesPicker() async {
    try {
      final _imagePath = await ImagePicker().getImage(
          source: ImageSource.gallery,
          imageQuality: 10,
          maxHeight: 50,
          maxWidth: 50
      );
      setState(() {
        _image = _imagePath;
      });
    } catch (err) {
      print(err);
    }
  }

  Future<String> imageUpload(PickedFile image) async {
    var bytes = await image.readAsBytes();

    fb.StorageReference _storage =
        fb.storage().ref('testScreen/${image.path}.jpg');
    fb.UploadTaskSnapshot uploadTaskSnapshot = await _storage
        .put(bytes, fb.UploadMetadata(contentType: 'image/png'))
        .future;

    var imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    imageUrl = imageUri.toString();
    return imageUrl;
  }
}

I tested by changing the value of 'imageQuality' of ImagePicker, but when uploaded to storage, all image files were the same size.

enter image description here

Can I know what the problem is? Is it a problem to upload to storage?

Thank you.

Solution

From the image_picker repository, there's some inconsistency in what adjustments can be made to what type of images.

Here's an overview that might give some important lead.

Can I know what the problem is?

The comments in the actual implementation of the package has some lines[here]:

//Note that the `maxWidth`, `maxHeight` and `imageQuality` arguments are not supported on the web. If any of these arguments is supplied, it'll be silently ignored by the web version of the plugin.

However, there's still an implementation of the resizing of a selected image though.

Is it a problem to upload to storage?

Seemingly no.

Here's what you may wish to try going forward; run your app on other platforms and try to establish if the image is resized, this will help you single out if it's only on the web that the quality is not being adjusted.

If you establish this to be so, you may wish to have your own implementation of quality/size adjustment of the picked media, you can utilise kIsWeb boolean property to determine if it's web, then apply your own implementation.

   if(kIsWeb){
       //Adjust quality/size
     }else{
       //use the already adjusted media
    }

Note this comment as well:

//Compression is only supported for certain image types such as JPEG and on Android PNG and WebP, too. If compression is not supported for the image that is picked, a warning message will be logged.