【问题标题】:Flutter/Dart - Convert image(base64) show error in circle avatarFlutter/Dart - 转换图像(base64)在圆形头像中显示错误
【发布时间】:2020-04-16 14:14:52
【问题描述】:

将图片转换成:

final prefs = await SharedPreferences.getInstance(); 
var image = ((prefs.getString('photo'))); 
var send = {'name': usu, 'email': email, 'image': photo};

在小部件中:

Widget _buildDrawer(BuildContext context) { return FutureBuilder<Map>(
      future: getFutureDates(), // function where you call your api
      builder: (BuildContext context, AsyncSnapshot<Map> snapshot) {
    if(!snapshot.hasData) {
      return Center(child: CircularProgressIndicator());
    } else {
      Uint8List profile = base64.decode(snapshot.data['image']); new UserAccountsDrawerHeader(
                  accountName: new Text((json.encode(snapshot.data['name']).toString().replaceAll('"', ''))),
                  accountEmail: new Text((json.encode(snapshot.data['email']).toString().replaceAll('"', ''))),
                  currentAccountPicture: new CircleAvatar(
                    backgroundImage: MemoryImage((profile)),
                  ),
                ), } }

姓名和邮箱没问题,但是照片给我一个错误:

无效字符(在字符 呃 5)

data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8PDxAPDw4PD...

【问题讨论】:

  • 请更新标题和文字。很难接受你的问题

标签: flutter dart


【解决方案1】:

原因:

base64 字符串包含data:image/png;base64, 导致错误

data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8PDxAPDw4PD

解决方案:

删除字符串 data:image/png;base64, ,你可以使用 substring(22) 并且只保留

/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8PDxAPDw4PD...

代码sn-p

void main() { 
  String base64str = '''data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8PDxAPDw4PD''';
  String newString =  base64str.substring(22);      
  print(newString);

}

输出

/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBw8PDw8PDxAPDw4PD    

【讨论】:

  • 糟糕的解决方案。如果图像类型是 JPEG 怎么办?更好的解决方案是base64str.replaceAll(RegExp(r'^data:image\/[a-z]+;base64,'), '')
猜你喜欢
  • 2021-04-01
  • 1970-01-01
  • 2022-08-15
  • 2019-04-30
  • 2021-03-17
  • 1970-01-01
  • 2017-10-08
  • 2014-03-28
  • 2019-11-05
相关资源
最近更新 更多