I am using the following code to pick an image with maxHeight/width to save space.
void openGallery()async {
var gallery = await ImagePicker.pickImage(
source: ImageSource.gallery,
maxHeight: maxImageSize,
maxWidth: maxImageSize,
);
if (gallery!=null) {
var bytes = await gallery.readAsBytes();
if (DEBUG) print('Image bytes: ${bytes.length / 1024} KB');
if (DEBUG) print('Image path: ${gallery.path}');
setState(() {
List<int> imageBytes = gallery.readAsBytesSync();
_imageB64 = base64Encode(imageBytes);
// decoded = base64Decode(_imageB64);
if (DEBUG) print('Base64 String length: ${_imageB64.length / 1024} KB');
});
}
}
I am getting this following warning in my console:
image_picker: compressing is not supported for type (null). Returning the image with original quality
flutter: Image bytes: 153.583984375 KB
flutter: Image path: ...myimagpath.jpg
flutter: Base64 String length: 204.78125 KB
1) On one side I can see that my image is reduced in size as it is only 200kB but on the other hand the first line is confusing me.
2) Also, I was under the impression that BASE64 encoded images get smaller in size, As I want to save them to Firebase, will there be a problem saving them as just 'bytes' (as it is 153kb)?
Try this, It's working fine with my code.
var selectedProfileImage;
Future _getImage(bool fromCamera) async {
File image;
if (fromCamera) {
image = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 150.0, maxHeight: 150.0);
} else {
image = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 150.0, maxHeight: 150.0);
}
if (image != null) {
// Initiate the ProgessBar
selectedProfileImage = image;
}
}
Related
There is a place to upload images in the flutter app, it is uploaded to S3, and it takes an average of 10 seconds to upload via the API in the backend, the image size is 800:800, the size is around 300 kb, how can I speed it up?
uploadFile(image) async {
var file = File(image.path);
await apiController.newUploadImage(file).then((data) async{
if(data != null){
await updateStatus("", data['id']);
}
});
Future getImage(bool isFromCamera) async {
return await imagePicker.getImage(
source: isFromCamera ? ImageSource.camera
: ImageSource.gallery,
maxHeight: 800.0,
maxWidth: 800.0
);
}
I use image_picker: ^0.8.5+3 for upload image in web flutter.
Future _imgFromGallery() async {
final image = await picker.pickImage(
source: ImageSource.gallery, maxWidth: 800, maxHeight: 800);
}
But when I print image.path the uploaded photo, it shows me this address with 'blob' blob 'http://localhost:22808/8108f482-37c1-4b7f-9e9c-9e65d1810f5a'
I want to convert image to base64 and for this I use the following code. But this conversion is not done correctly and completely.Can you help me in this matter?
final bytes = html.File(image.path.codeUnits, image.path);
Uint8List b = Uint8List(bytes.toString().length);
String img64 = Base64Encoder().convert(b);
I found the solution to my problem. I had to add the image_picker_for_web: ^2.1.8 and convert the photo to Base64 with the code below:
var image = await picker.pickImage(
source: ImageSource.gallery, maxWidth: 800, maxHeight: 800);
var imageForWeb = await image.readAsBytes();
String base64Image = base64Encode(imageForWeb);
There are lot of references of uploading a dart:io 'File' but I want to upload a material.dart Image to firebase.
My Image comes from a processed Thumbnail of a video and not just picked by a Image picker.
This is how I generate a thumbnail,
Future<ThumbnailResult> genThumbnail(url) async {
//WidgetsFlutterBinding.ensureInitialized();
Uint8List bytes;
final Completer<ThumbnailResult> completer = Completer();
bytes = await VideoThumbnail.thumbnailData(
video: url,
imageFormat: ImageFormat.JPEG,
maxHeight: 250,
maxWidth: 300,
timeMs: 0,
quality: 0);
int _imageDataSize = bytes.length;
print("image size: $_imageDataSize");
final _image = Image.memory(bytes);
//final _file =File.fromRawPath(bytes);
_image.image
.resolve(ImageConfiguration())
.addListener(ImageStreamListener((ImageInfo info, bool _) {
completer.complete(ThumbnailResult(
image: _image,
dataSize: _imageDataSize,
height: info.image.height,
width: info.image.width,
));
}));
return completer.future;
}
and this is how File is uploaded to firebase
String Thumbfileurl = await uploadFile(thumbResult.image, fileName, fileType);
And inside uploadFile()
final StorageUploadTask uploadTask = storageReference.putFile(file);
So as you see , A File is needed , but i have an Image , is there a way to Convert Image to File or is there any workaround to achieve this .
Trying to generate an Thumbnail image from video , the file is created but , errors as Invalid image on load .Using this package video_thumbnail
Creating thumbnail ,
Future<File> genThumbnail(url) async {
//WidgetsFlutterBinding.ensureInitialized();
Uint8List bytes;
final Completer<ThumbnailResult> completer = Completer();
bytes = await VideoThumbnail.thumbnailData(
video: url,
imageFormat: ImageFormat.JPEG,
maxHeight: 250,
maxWidth: 300,
timeMs: 0,
quality: 0);
int _imageDataSize = bytes.length;
print("image size: $_imageDataSize");
//final _image = Image.memory(bytes);
//var _file =File.fromRawPath(bytes);
Directory tempDir = await getTemporaryDirectory();
var uint8list = bytes;
var buffer = uint8list.buffer;
ByteData byteData = ByteData.view(buffer);
File file = await File('${tempDir.path}/img/THUMBNAIL${DateTime.now().toIso8601String()}.JPEG').writeAsBytes(
buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));
return file;
}
Saving to firestore
await genThumbnail(fileurl).then((_thumbFIle) async{
String Thumbfileurl = await uploadFile(_thumbFIle, 'thumbnailOf${filenamewithoutExtension}.JPEG', 'videothumbnail');
await sendFileToFirestoreChat(fileType, fileurl, filenamewithoutExtension,Thumbfileurl);
return fileurl;
});
The Saved Image ,
https://firebasestorage.googleapis.com/v0/b/proj-inhouse.appspot.com/o/videos%2Fvideothumbnails%2FthumbnailOfVID-20210301-WA0006.JPEG?alt=media&token=fa4f23c1-601f-486b-97d1-c63e221166af
Posting this as a Community Wiki as it's based on #pskink comments.
To resolve, add the writeAsBytes(bytes) instead of writeAsBytes(buffer.asUint8List()). There is no need for any buffer.
Working on a flutter project which needs to take photos and resize / crop images to 640 / 420 (15:10) before uploading to the server but they seem to be too lose too much quality and pixelated.
img.Image image = img.decodeImage(a2);
double width = (image.height / 10) * 15;
image = img.copyCrop(image, ((image.width - width) / 2).round(), 0, width.round(), image.height);
resized = img.encodeJpg(img.copyResize(image, width:640, interpolation: img.Interpolation.cubic));
currently using the camera to shoot at 720p (1280x720) and the image plugin for the crop and resize using average interpolation.
I'm mostly wondering if this is the best way to handle the image processing to keep the most quality or if there is a better method for this use case.
you should try this method, I've been using the following method for myself and it works like charm, the image isn't losing any quality either and the size is way too compressed
final _tempDir = await getTemporaryDirectory();
final _path = _tempDir.path;
im.Image imageFile = im.decodeImage(_file.readAsBytesSync());
mealID = Uuid().v4();
final compressedImageFile = File('$_path/img_$mealID.jpg')
..writeAsBytesSync(im.encodeJpg(imageFile, quality: 80));
setState(() {
_file = compressedImageFile;
});
the above method is for compressing image, and for capturing image from gallery/camera I'm using the method below.
Future getImageFromCamera() async {
Navigator.pop(context);
var image = await ImagePicker.pickImage(
source: ImageSource.camera,
imageQuality: 50,
/*you can set max height and/or width here as well just by setting value for maxHeight and/or maxWidth argument*/
);
setState(() {
_file = image;
});
await compressImage();
}
Future getImageFromGallery() async {
Navigator.pop(context);
var image = await ImagePicker.pickImage(
source: ImageSource.gallery,
imageQuality: 50,
);
setState(() {
_file = image;
});
await compressImage();
}