Flutter：Image.memory加载Base64解码JPEG失败，CanvasKit渲染下如何解决

以下是几种无需切换到HTML渲染器的可行解决方案：

1. 移除Base64字符串的Data URI前缀 #

很多API返回的Base64图片会附带data:image/[格式];base64,前缀，CanvasKit的Image.memory无法识别该前缀，需先剥离：

String rawBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...";
// 截取前缀后的纯Base64内容
if (rawBase64.startsWith('data:image/')) {
  rawBase64 = rawBase64.split(',').last;
}
Uint8List imageBytes = base64.decode(rawBase64);
Image.memory(imageBytes);

2. 手动补全Base64的补位符 #

Base64字符串长度必须是4的倍数，若API返回内容缺少补位的=，会导致解码失败，可手动补全：

String base64Image = "iVBORw0KGgoAAAANSUhEUgAA...";
// 补全至4的倍数长度
while (base64Image.length % 4 != 0) {
  base64Image += '=';
}
Uint8List imageBytes = base64.decode(base64Image);

3. 处理URL安全的Base64格式 #

部分API会返回URL安全的Base64（用-替代+，_替代/），这类格式无法被标准base64.decode正确解析，需先转换：

String urlSafeBase64 = "iVBORw0KGgoAAAANSUhEUgAA...";
// 转换为标准Base64格式
String standardBase64 = urlSafeBase64.replaceAll('-', '+').replaceAll('_', '/');
Uint8List imageBytes = base64.decode(standardBase64);

4. 转换图片格式后加载 #

如果原图片是WebP等CanvasKit支持不佳的格式，可先将解码后的字节转换为PNG/JPEG格式（需依赖image库）：

import 'package:image/image.dart' as img;

String base64Image = "iVBORw0KGgoAAAANSUhEUgAA...";
Uint8List originalBytes = base64.decode(base64Image);
// 解码为Image对象并转换为PNG
img.Image? decodedImg = img.decodeImage(originalBytes);
if (decodedImg != null) {
  Uint8List pngBytes = img.encodePng(decodedImg);
  return Image.memory(pngBytes);
}

内容的提问来源于stack exchange，提问作者Mehmet Karagöz