I cannot convert resized Image object to Base64 string in Dart

Question

I want to resize Image received form imagepicker in Flutter and send it to database in base64 format.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:geolocator/geolocator.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:convert';
import 'package:firebase_ml_vision/firebase_ml_vision.dart';
import 'package:path_provider/path_provider.dart';
import 'package:image/image.dart'as img;


class _MyHomePageState extends State<MyHomePage> {
  File pickedImage;
  var text = '';


  bool imageLoaded = false;

  Future pickImage() async {
    var awaitImage = await ImagePicker.pickImage(source: ImageSource.gallery);

    setState(() {
      pickedImage = awaitImage;
      imageLoaded = true;
      text="";
    });

 Future<http.Response> postRequest ( text) async {
    var url ="http://sethbrundle-001-site1.itempurl.com/api/gen";
    var url2 ="http://sethbrundle-001-site1.itempurl.com/api/gen2";

    //List<int> imageBytes = pickedImage.readAsBytesSync();
    img.Image image = img.decodeImage(pickedImage.readAsBytesSync());
    var resized_image= img.copyResize(image, width:120);
    String  base64Image = base64Encode(resized_image.getBytes());
    }
    }

I dont know why but after this image is not recognizable.

Answer 1

To make it work, I just saved the file and converted the saved file to base64. So just save the resized image and then convert the file that you just saved. have a loot at this:

class _MyHomePageState extends State<MyHomePage> {
  File pickedImage;
  var text = '';
  int imageHeight = 0;
  int imageHeightResized = 0;
  Uint8List _bytesImage;
  bool imageLoaded = false;

  Future pickImage() async {
    var awaitImage = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      pickedImage = awaitImage;
      img.Image image = img.decodeImage(pickedImage.readAsBytesSync());
      imageHeight = image.height;
      imageLoaded = true;
      text = "";
    });

    img.Image image = img.decodeImage(pickedImage.readAsBytesSync());
    var resizedImage = img.copyResize(image, height: 120, width: 120);

    //Get a path to save the resized file
    final directory = await getApplicationDocumentsDirectory();
    String path = directory.path;

    // Save file 
    File resizedFile = File('$path/resizedImage.jpg')
      ..writeAsBytesSync(img.encodePng(resizedImage));

    setState(() {
      imageHeightResized = resizedImage.height;
      // Convert saved file to base64, you can use this to send to your API
      String base64Image = base64Encode(resizedFile.readAsBytesSync());

      // Decoding the file here to show in the app, this is just to show that it works fine
      _bytesImage = Base64Decoder().convert(base64Image);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                pickImage();
              },
              child: Text('Pick Image'),
            ),
            pickedImage == null
                ? Container()
                : Image.file(
                    pickedImage,
                    height: 200,
                  ),
            Text('image height = $imageHeight'),
            Text('image height resized = $imageHeightResized'),
            _bytesImage == null ? Container() : Image.memory(_bytesImage),
          ],
        ),
      ),
    );
  }
}

Answer 2

You can do base64 encoding as follows.

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

...

img.Image image = img.decodeImage(pickedImage.readAsBytesSync());
var resized_image= img.copyResize(image, width: 120);
String base64Image = base64Encode(img.encodePng(resized_image));

Note the difference is that, one has to encode the image to an intermediate format (say .png)