Wrong Flutter error Convert image ImagePicker type File to base64, Wrong Encoded

Question

I need to convert an image that I get from the device with ImagePicker, convert it from File type to base64 to store it through a post in a db, but the procedure I do to convert it does not do it well, it converts only a thin line and the rest blank, apparently readAsbyte does not convert well when implemented as "var bytes = imageFile.readAsBytesSync ();" makes it incomplete

this is how i am implementing it

File imageFile;

void _openGallery(BuildContext context) async{ 
  var picture = await ImagePicker().getImage(source: ImageSource.gallery);
  this.setState(() {
    imageFile = File(picture.path);
    var bytes = imageFile.readAsBytesSync();
  
    String imagenConvertida = base64.encode(bytes);
    print(bytes);
    print(imagenConvertida);

});
Navigator.of(context).pop();

}

Lotti

Don't forget that print will only print the first few hundred characters. The rest is truncated. – Bohemian

What size is the MySQL field your are saving to? MySQL will truncate a field of it's too long. As soon as you encode it decode on the following line and compare the the decoded value with the original input. I'm pretty sure it will give you the correct results. So it's likely to be MySQL or the method you use to transport the data to the server. – Emmanuelemmeline

Is there a reason you are trying to convert the file to base64 before storing it in a database? Many databases nowadays can store binary data perfectly well in a BINARY or BLOB column type. – Dejection

@RichardHeap in this case convert the var picture or imageFile? How can make this? I need convert the picture to base64 to send to phpmyadmin – Lotti

Answer 1

From your implementation,

File imageFile;

void _openGallery(BuildContext context) async{ 
  var picture = await ImagePicker().getImage(source: ImageSource.gallery);
  this.setState(() {
    imageFile = File(picture.path);
    var bytes = imageFile.readAsBytesSync();
  
    String imagenConvertida = base64.encode(bytes);
    print(bytes);
    print(imagenConvertida);

});
Navigator.of(context).pop();

The output of bytes is

[255, 216, 255, 225, 1, 181, 69, 120, 105, 102, 0, 0, 77, 77, 0, 42, 0, 0, 0, 8, 0, 7, 1, 16, 0, 2, 0, 0, 0, 26, 0, 0, 0, 98, 1, 0, 0, 4, 0, 0, 0, 1, 0, 0, 3, 192, 1, 1, 0, 4, 0, 0, 0, 1, 0, 0, 5, 0, 1, 50, 0, 2, 0, 0, 0, 20, 0, 0, 0, 124, 1, 18, 0, 3, 0, 0, 0, 1, 0, 1, 0, 0, 135, 105, 0, 4, 0, 0, 0, 1, 0, 0, 0, 151, 1, 15, 0, 2, 0, 0, 0, 7, 0, 0, 0, 144, 0, 0, 0, 0, 65, 110, 100, 114, 111, 105, 100, 32, 83, 68, 75, 32, 98, 117, 105, 108, 116, 32, 102, 111, 114, 32, 120, 56, 54, 0, 50, 48, 50, 48, 58, 48, 57, 58, 48, 50, 32, 48, 52, 58, 49, 53, 58, 51, 54, 0, 71, 111, 111, 103, 108, 101, 0, 0, 16, 130, 157, 0, 5, 0, 0, 0, 1, 0, 0, 1, 93, 130, 154, 0, 5, 0, 0, 0, 1, 0, 0, 1, 101, 146, 146, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 145, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 144, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 10, 0, 5, 0, 0, 0, 1, 0, 0, 1, 109, 146, 9, 0, 3, 0, 0, 0, 1, 0, 0, 0, 0, 136, 39, 0, 3, 0, 0, 0, 1, 0, 100, 0, 0, 144, 4, 0, 2, 0, 0, 0, 20, 0, 0, 1, 117, 144, 3, 0, 2, 0, 0, 0, 20, 0,

The output of imagenConvertida is

/9j/4QG1RXhpZgAATU0AKgAAAAgABwEQAAIAAAAaAAAAYgEAAAQAAAABAAADwAEBAAQAAAABAAAFAAEyAAIAAAAUAAAAfAESAAMAAAABAAEAAIdpAAQAAAABAAAAlwEPAAIAAAAHAAAAkAAAAABBbmRyb2lkIFNESyBidWlsdCBmb3IgeDg2ADIwMjA6MDk6MDIgMDQ6MTU6MzYAR29vZ2xlAAAQgp0ABQAAAAEAAAFdgpoABQAAAAEAAAFlkpIAAgAAAAQ4ODkAkpEAAgAAAAQ4ODkAkpAAAgAAAAQ4ODkAkgoABQAAAAEAAAFtkgkAAwAAAAEAAAAAiCcAAwAAAAEAZAAAkAQAAgAAABQAAAF1kAMAAgAAABQAAAGJoAMABAAAAAEAAAUApAMAAwAAAAEAAAAAoAIABAAAAAEAAAPAkgIABQAAAAEAAAGdkgEACgAAAAEAAAGlkAAABwAAAAQwMjIwAAAAAAAAARgAAABkAJiWgDuaygAAABOIAAAD6DIwMjA6MDk6MDIgMDQ6MTU6MzYAMjAyMDowOTowMiAwNDoxNTozNgAAAAEpAAAAZAAAGfMAAAPo/+AAEEpGSUYAAQEAAAEAAQAA/9sAQwACAQEBAQECAQEBAgICAgIEAwICAgIFBAQDBAYFBgYGBQYGBgcJCAYHCQcGBggLCAkKCgoKCgYICwwLCgwJCgoK/9sAQwECAgICAgIFAwMFCgcGBwoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoK/8AAEQgFAAPAAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVm

Reversing it, I come up with the following code:

  File imageFile;
  Image decodedImage;

  void _openGallery(BuildContext context) async {
    var picture = await ImagePicker().getImage(source: ImageSource.gallery);
    this.setState(
      () {
        imageFile = File(picture.path);
        // Convert image to base64
        var bytes = imageFile.readAsBytesSync();
        String imagenConvertida = base64.encode(bytes);
        print('Value of bytes: $bytes');
        print('Value of imagenConvertida: $imagenConvertida');
        // Convert base64 to image
        Uint8List decodedBytes = base64.decode(imagenConvertida);
        decodedImage = Image.memory(decodedBytes);
        print('Value of decodedBytes: $decodedBytes');
        print('Value of decodedImage: $decodedImage');
      },
    );
    // Commented out for testing purposes
    // Navigator.of(context).pop();
  }

When you compare the output the value of decodedBytes

[255, 216, 255, 225, 1, 181, 69, 120, 105, 102, 0, 0, 77, 77, 0, 42, 0, 0, 0, 8, 0, 7, 1, 16, 0, 2, 0, 0, 0, 26, 0, 0, 0, 98, 1, 0, 0, 4, 0, 0, 0, 1, 0, 0, 3, 192, 1, 1, 0, 4, 0, 0, 0, 1, 0, 0, 5, 0, 1, 50, 0, 2, 0, 0, 0, 20, 0, 0, 0, 124, 1, 18, 0, 3, 0, 0, 0, 1, 0, 1, 0, 0, 135, 105, 0, 4, 0, 0, 0, 1, 0, 0, 0, 151, 1, 15, 0, 2, 0, 0, 0, 7, 0, 0, 0, 144, 0, 0, 0, 0, 65, 110, 100, 114, 111, 105, 100, 32, 83, 68, 75, 32, 98, 117, 105, 108, 116, 32, 102, 111, 114, 32, 120, 56, 54, 0, 50, 48, 50, 48, 58, 48, 57, 58, 48, 50, 32, 48, 52, 58, 49, 53, 58, 51, 54, 0, 71, 111, 111, 103, 108, 101, 0, 0, 16, 130, 157, 0, 5, 0, 0, 0, 1, 0, 0, 1, 93, 130, 154, 0, 5, 0, 0, 0, 1, 0, 0, 1, 101, 146, 146, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 145, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 144, 0, 2, 0, 0, 0, 4, 56, 56, 57, 0, 146, 10, 0, 5, 0, 0, 0, 1, 0, 0, 1, 109, 146, 9, 0, 3, 0, 0, 0, 1, 0, 0, 0, 0, 136, 39, 0, 3, 0, 0, 0, 1, 0, 100, 0, 0, 144, 4, 0, 2, 0, 0, 0, 20, 0, 0, 1, 117, 144, 3, 0, 2, 0, 0, 0,

And when you convert it, it will give you the exact original image, see the sample app code below:

import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:image_picker/image_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // From SO
  File imageFile;
  Image decodedImage;

  void _openGallery(BuildContext context) async {
    var picture = await ImagePicker().getImage(source: ImageSource.gallery);
    this.setState(
      () {
        imageFile = File(picture.path);
        // Convert image to base64
        var bytes = imageFile.readAsBytesSync();
        String imagenConvertida = base64.encode(bytes);
        print('Value of bytes: $bytes');
        print('Value of imagenConvertida: $imagenConvertida');
        // Convert base64 to image
        Uint8List decodedBytes = base64.decode(imagenConvertida);
        decodedImage = Image.memory(decodedBytes);
        print('Value of decodedBytes: $decodedBytes');
        print('Value of decodedImage: $decodedImage');
      },
    );
    // Commented out for testing purposes
    // Navigator.of(context).pop();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              height: 20.0,
            ),
            Text('Original image from gallery'),
            SizedBox(height: 10.0),
            Container(
              color: Colors.blueGrey,
              height: 200.0,
              width: 150.0,
              child: imageFile == null
                  ? Text('Image is not loaded')
                  : Image.file(imageFile),
            ),
            SizedBox(height: 20.0),
            Text('Image decoded from base64'),
            SizedBox(height: 10.0),
            Container(
              color: Colors.grey,
              height: 200.0,
              width: 150.0,
              child: decodedImage == null
                  ? Text('Image is not loaded')
                  : decodedImage,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        // crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              // _getImage();
              _openGallery(context);
              print('Open Gallery');
            },
            tooltip: 'Pick an image',
            child: Icon(Icons.image),
          ),
          SizedBox(
            width: 20,
          ),
        ],
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Since the decoded image is the same as the original image, I think var bytes = imageFile.readAsBytesSync(); is working fine.

Chiffon