How to save a image from image picker in flutter in two different size

Question

I am working in a code to pick a image using device camera and store in a variable. I worked with saving the original photo but in the same place i also need to save the photo but with small resolution so that i can use it as thumbnail. I need to upload both the image to firebase storage and retrieve it when needed.

Future getImage() async{
var tempImage = await ImagePicker.pickImage(source: ImageSource.camera,imageQuality: 30);

setState(() {
  sampleImage=tempImage;
  _tempThumb=Image.file(sampleImage,height: 20,width: 20,);


});
}

My code works for storing image in tempImage variable but dont know how to upload the small image stored in _tempThumb variable

final StorageReference postImageRef= FirebaseStorage.instance.ref().child("Post Images");

    var timeKey=new DateTime.now();
    final StorageUploadTask uploadTask=postImageRef.child(timeKey.toString()+".jpg").putFile(sampleImage);


    var ImageUrl = await(await uploadTask.onComplete).ref.getDownloadURL();

I am able to upload the full sized image but have no idea about how to upload the small sized image.

Answer 1

Add this to your pubspec.yaml:

image: ^2.1.4

Add this import statement:

import 'package:image/image.dart' as img;

Then first decode your image:

img.Image image = img.decodeImage(tempImage.readAsBytesSync());

Then resize it:

img.Image thumbnail = img.copyResize(image, width: 20, height: 20);

Then encode it again:

var thumb = img.encodePng(thumbnail);

This gives an int array that you can save to firebase.