Как мне получить данные из этого поля json?

Question

Как у вас дела?

Я пытаюсь получить данные из json, чтобы отобразить их на экране, который должен быть похож на изображение ниже. Я могу получить большую часть данных, кроме одного поля, закодированного как String, которое состоит из изображения и описания, подобного этому:

"lessonText": "{\"ops\":[{\"insert\":{\"image\":\"data:image/jpeg;base64,(IMAGE CODE HERE)=\"}},{\"attributes\":{\"color\":\"#444444\"},\"insert\":\"(LESSON TEXT HERE)\"},{\"insert\":\"\\n\"}]}",

Как мне извлечь данные отсюда? Я попытался преобразовать это в карту, но это не работает.

Спасибо за помощь!

Answer 1

Что-то в соответствии с этим должно дать вам изображение

// json string containing the base64 image string
String jsonString = "{\"ops\":[{\"insert\":{\"image\":\"data:image/png;base64,(IMAGE CODE HERE)=\"}},{\"attributes\":{\"color\":\"#444444\"},\"insert\":\"(LESSON TEXT HERE)\"},{\"insert\":\"\\n\"}]}";

// convert the string to a map structure
Map<String, dynamic> json = jsonDecode(jsonString);

// extract the image string
String imageString = json['ops'][0]['insert']['image'];

// extract the base64 string
var prefix = "data:image/png;base64,";
var imageBase64String = imageString.substring(prefix.length);

// decode the base 64 string
var bytes = base64Decode(imageBase64String);

// build the image widget from bytes
var imageWidget = Image.memory(bytes);

Answer 2

Как я уже упоминал в комментариях, используйте комбинацию декодирования строки base64 в байты и последующей загрузки изображения из памяти. См. Соответствующую документацию для base64Decode и Image.memory. Если вам нужен полный образец кода, просто дайте мне знать, и я с радостью скину его вместе.

Примечание: вы должны запускать метод base64Decode асинхронно, так как может потребоваться некоторое время, чтобы декодировать весь образ (особенно на младшем оборудовании).