Flutter & Firebase: Compression before upload image

Question

I want to send photo selected by user in my app to Firebase Storage. I have a simple class with property _imageFile which is set like this:

File _imageFile;  _getImage() async {     var fileName = await ImagePicker.pickImage();     setState(() {         _imageFile = fileName;     }); } 

after that I send photo like with this code:

final String rand1 = "${new Random().nextInt(10000)}"; final String rand2 = "${new Random().nextInt(10000)}"; final String rand3 = "${new Random().nextInt(10000)}"; final StorageReference ref = FirebaseStorage.instance.ref().child('${rand1}_${rand2}_${rand3}.jpg'); final StorageUploadTask uploadTask = ref.put(_imageFile); final Uri downloadUrl = (await uploadTask.future).downloadUrl; print(downloadUrl); 

The problem is that the photos are often very large. Is there any method in Flutter/Dart to compress and resize photo before upload? I am ok with loss of quality.

Answer 1

June 05, 2020 - Update

The image_picker plugin now supports an imageQuality paramater. You can do something like

ImagePicker imagePicker = ImagePicker(); PickedFile compressedImage = await imagePicker.getImage(   source: ImageSource.camera,   imageQuality: 85, ); 

Old Answer

or if you want to compress an image without using ImagePicker

I ran into this and was able to accomplish compression / resizing with the Dart image package along with path provider. You can look at dart image api and examples for other ways and more help.

Here's what I did:

import 'package:image/image.dart' as Im; import 'package:path_provider/path_provider.dart'; import 'dart:math' as Math;  void compressImage() async {   File imageFile = await ImagePicker.pickImage();   final tempDir = await getTemporaryDirectory();   final path = tempDir.path;   int rand = new Math.Random().nextInt(10000);    Im.Image image = Im.decodeImage(imageFile.readAsBytesSync());   Im.Image smallerImage = Im.copyResize(image, 500); // choose the size here, it will maintain aspect ratio      var compressedImage = new File('$path/img_$rand.jpg')..writeAsBytesSync(Im.encodeJpg(image, quality: 85)); } 

Then I uploaded compressedImage to firebase storage. You can adjust the quality that the jpg is saved with using the quality property, in my case I chose 85 (out of 100).

Hope this helps! Let me know if you have any questions.