dart 如何在flutter中将图像转换为base64图像?

xytpbqjk  于 2023-02-10  发布在  Flutter
关注(0)|答案(9)|浏览(707)

我实际上是试图将一个由ImagePicker在flutter中拾取的图像转换为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);

拜托,谁能告诉我我在哪里犯了错误。
谢谢你,Mahi

izkcnapc

izkcnapc1#

我只是将代码更改为如下所示,

import 'dart:convert';

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

现在一切正常。
最好异步读取,因为图像可能非常大,这可能会导致主线程阻塞

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

ckocjqey2#

你可以简单地将图像改为字符串:

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

String img64 = base64Encode(bytes);
rhfm7lfc

rhfm7lfc3#

在我的例子中,我首先使用image_picker选择图像,然后使用这行代码将图像转换为base64。

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

                          print("img_pan : $base64Image");

图像选择器代码(_P):

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

wz8daaqr4#

如果您尝试使用Flutter Web管理图像/文件上传,https://pub.dev/packages/file_picker是一个更好的包。
正如我们所知,dart:io在Flutter Web上不受支持,并抛出Unsupported operation: _Namespace错误。因此,使用File和阅读文件的字节不是一个选项。幸运的是,该包提供了API来将上传的图像转换为Uint8List。以下是我的实现:

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

如果需要立即显示本Map像,请使用Image.memory

Image.memory(logoBase64!);
fruv7luv

fruv7luv5#

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

fzwojiic6#

我看到不止一个人已经回答了这个问题,但是我允许自己提出我的解决方案,它对我很有效。

void openFileImageExplorer() async {
    //try {
      final pickedFile = await FilePicker.platform.pickFiles(
          allowedExtensions: ['jpg', 'jpeg', 'png', 'bmp', 'gif']
      );
      if (pickedFile == null) {
        return;
      }

    final file = pickedFile.files.first;

    final bytes = File(file.path!).readAsBytesSync();
    String img64 = base64Encode(bytes);
    setState(() {
      imageBase64 = img64;
    });

    logCat(img64);
    //} catch(ex, trace ){
    //  logError(ex, trace: trace);
    //}
}

并显示图像

Image.memory( base64Decode(imageBase64), fit: BoxFit.cover )

希望能有所帮助。

flvtvl50

flvtvl507#

下面是一个简单的函数:

String convertIntoBase64(File file) {
List<int> imageBytes = file.readAsBytesSync();
String base64File = base64Encode(imageBytes);
return base64File;
}
8ulbf1ek

8ulbf1ek8#

//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;
  });
});  }
kqqjbcuj

kqqjbcuj9#

尝试使用Content-Type:charset=utf-8
在我例子中,我在API的头中使用"Content-Type":"application/json; charset=utf-8"

http.post(
        Uri.parse(url),
        body: myBody,
        headers: {"Content-Type":"application/json; charset=utf-8"},
      );

var baseEncode= base64Encode(await file.readAsBytes());用于编码
这对我很有效

相关问题