'how to convert an image to base64 image in flutter?
I am actually trying to convert an image picked by ImagePicker in flutter to base64 image. I am always getting the error.
FileSystemException: Cannot open file, path =
'file:///storage/emulated/0/Download/Abid_Wipro_neemuchwala1-
770x433.jpg' (OS Error: No such file or directory, errno = 2)
E/flutter ( 5042): #0 _File.throwIfError
(dart:io/file_impl.dart:628)
E/flutter ( 5042): #1 _File.openSync
(dart:io/file_impl.dart:472)
E/flutter ( 5042): #2 _File.readAsBytesSync
(dart:io/file_impl.dart:532)
the code i am using is this one.
File fileData;
/////////////...........
new Container(
child: new FutureBuilder<File>(
future: imageFile,
builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
snapshot.data != null) {
fileData = snapshot.data;
return new Container(
height: MediaQuery.of(context).size.height / 2,
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.all(4.0),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new FileImage(snapshot.data,),
fit: BoxFit.cover
),
),
);
} else if (snapshot.error != null) {
return new Column(children: <Widget>[
centerWidget('Choose Image or Audio or Video'),
_circleAvatar()
]);
} else {
return new Column(children: <Widget>[
centerWidget('Choose Image or Audio or Video'),
_circleAvatar()
]);
}
},
),
),
/////////////////
File imageFile = new File(widget.fileData.uri.toString());
List<int> imageBytes = imageFile.readAsBytesSync();
String base64Image = base64Encode(imageBytes);
Please, can someone tell me where is it that i am making a mistake .
Many thanks, Mahi
Solution 1:[1]
I just changed my code as follows,
import 'dart:convert';
List<int> imageBytes = widget.fileData.readAsBytesSync();
print(imageBytes);
String base64Image = base64Encode(imageBytes);
and this is working fine now.
It is better to read it asynchronously as the image can be very large which may cause blocking of the main thread
List<int> imageBytes = await widget.fileData.readAsBytes();
Solution 2:[2]
you can simply change the image to string :
final bytes = Io.File(imageBytes.path).readAsBytesSync();
String img64 = base64Encode(bytes);
Solution 3:[3]
In my case, i first selected the image using image_picker then use these line of code to convert the image to base64.
final bytes = File(image!.path).readAsBytesSync();
String base64Image = "data:image/png;base64,"+base64Encode(bytes);
print("img_pan : $base64Image");
image_picker code :
final ImagePicker _picker = ImagePicker();
XFile? image;
Container(
margin: const EdgeInsets.all(15.0),
padding: const EdgeInsets.all(3.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(5.h))
),
child:InkWell(
onTap: () async {
image = await _picker.pickImage(
source: ImageSource.gallery);
setState(() {});
},
child: image != null
? Image.file(
File(image!.path),
height: 100.h,
width: 100.w,
)
: Image.asset(
'assets/image_icon.png',
height: 100.h,
width: 100.w,
fit: BoxFit.fill,
),
),),
Solution 4:[4]
In case you are trying to manage image/file uploads using Flutter Web, https://pub.dev/packages/file_picker is a better package to go with.
As we know, dart:io is not supported on Flutter Web and throws Unsupported operation: _Namespace error. Hence, using File and reading file's bytes was not an option. Luckily, the package provides API to convert the uploaded image to Uint8List. Here is my implementation:
import 'package:file_picker/file_picker.dart';
...
FilePickerResult? pickedFile;
...
void chooseImage() async {
pickedFile = await FilePicker.platform.pickFiles();
if (pickedFile != null) {
try {
setState(() {
logoBase64 = pickedFile!.files.first.bytes;
});
} catch (err) {
print(err);
}
} else {
print('No Image Selected');
}
}
In case you need to display the local image right away, use Image.memory.
Image.memory(logoBase64!);
Solution 5:[5]
Container(
child: new GestureDetector(
onTap: () async {
FocusScope.of(context)
.requestFocus(new FocusNode());
await getImage();
},
child: new Center(
child: _image == null
? new Stack(
children: <Widget>[
new Center(
child: new CircleAvatar(
radius: 80.0,
backgroundColor:
const Color(0xFF778899),
),
),
new Center(
child: Icon(
Icons.perm_identity,
size: 120,
),
),
],
)
: new CircleAvatar(
radius: 60,
child: ClipOval(
child: Align(
heightFactor: 0.8,
widthFactor: 1.0,
child: new Image.file(_image),
),
),
),
),
),
),
Future getImage() async {
UserService userRestSrv = UserService();
PickedFile image = await ImagePicker().getImage(source: ImageSource.gallery, imageQuality: 50);
if (image != null) {
setState(() {
_image = File(image.path);
});
final bytes = File(image.path).readAsBytesSync();
String img64 = base64Encode(bytes);
var responseProfileImage = await userRestSrv.updateImage(userId, img64);
if (responseProfileImage != null && responseProfileImage.data['ResponseCode'] == "00")
showMessage('Profile Image not uploaded', false);
}
}
Solution 6:[6]
//this is dart code
final bytes = File(image!.path).readAsBytesSync();
String base64Image = base64Encode(bytes);
print("imgbytes : $base64Image");
//this is flutter code for image picker
Future uploadAll() async {
var bytes = File(image!.path).readAsBytesSync();
String base64Image = base64Encode(bytes);
print('upload proccess started');
var apipostdata = {
"title": contentController.text.toString().toUpperCase(),
"book_image": base64Image,
"book_type": _genderRadioBtnVal,
};
await http
.post(Uri.parse('http://192.168.29.111:8000/api/book/add_book'),
body: apipostdata)
.then((response) {
var returndata = jsonEncode(response.body);
if (response.statusCode == 200) {
print(returndata);
} else {
print('failed');
}
}).catchError((err) {
setState(() {
err;
});
}); }
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Vassily |
| Solution 2 | Antonin GAVREL |
| Solution 3 | Tarun Yadvendu |
| Solution 4 | Taiyr Begeyev |
| Solution 5 | Saad Ahmed |
| Solution 6 |