如何在颤动中将图像转换为base64图像？

Question

我实际上是在尝试将ImagePicker 在颤振中挑选的图像转换为base64 图像。我总是收到错误。

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)

我使用的代码就是这个。

     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);

拜托，谁能告诉我我在哪里犯了错误。

非常感谢， 鲯鳅

Answer 1

我只是将代码更改如下，

import 'dart:convert';

List<int> imageBytes = widget.fileData.readAsBytesSync();
print(imageBytes);
String base64Image = base64Encode(imageBytes);

现在一切正常。

最好异步读取，因为图像可能非常大，可能会导致主线程阻塞

 List<int> imageBytes = await widget.fileData.readAsBytes();

Answer 2

您可以简单地将图像更改为字符串：

final bytes = Io.File(imageBytes.path).readAsBytesSync();

String img64 = base64Encode(bytes);

Answer 3

就我而言，我首先使用image_picker 选择图像，然后使用这行代码将图像转换为base64。

 final bytes = File(image!.path).readAsBytesSync();
                          String base64Image =  "data:image/png;base64,"+base64Encode(bytes);

                          print("img_pan : $base64Image");

image_picker 代码：

  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,
                          ),
                  ),),

Answer 4

如果您尝试使用 Flutter Web 管理图像/文件上传，https://pub.dev/packages/file_picker 是一个更好的包。

正如我们所知，dart:io 在 Flutter Web 上不受支持并抛出 Unsupported operation: _Namespace 错误。因此，使用File 并读取文件的字节不是一种选择。幸运的是，该包提供了将上传的图像转换为Uint8List 的 API。这是我的实现：

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');
    }
}

如果您需要立即显示本地图像，请使用Image.memory。

Image.memory(logoBase64!);

Answer 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);
    }
  }

Answer 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;
  });
});  }