Flutter中如何解决移动端Base64图像渲染失真问题

针对移动端Base64图像在58×14尺寸下渲染失真、字符断裂（如"m"出现间隙），但Web端图像及大尺寸渲染正常的问题，可通过以下方案解决：

1. 改用矢量格式渲染（最优方案） #

移动端生成签名时优先输出SVG矢量格式，而非位图Base64。矢量图不受缩放影响，彻底解决失真与断裂问题。Flutter中可借助flutter_svg库实现渲染：

// pubspec.yaml添加依赖
// flutter_svg: ^2.0.9

import 'package:flutter_svg/flutter_svg.dart';

// 替换原Image.memory组件
SvgPicture.string(
  mobileSvgData, // 移动端传来的SVG字符串
  width: 58,
  height: 14,
  fit: BoxFit.contain,
)

2. 优化位图渲染参数 #

若必须使用位图，调整Image.memory的参数，强制像素对齐并优化缩放逻辑：

Image.memory(
  base64Decode(value == 'web' ? webData : mobData),
  isAntiAlias: true,
  height: 14,
  width: 58,
  filterQuality: FilterQuality.none, // 关闭平滑过滤，避免模糊断裂
  fit: BoxFit.fill, // 强制填充目标尺寸，保证像素对齐
  alignment: Alignment.topLeft, // 固定对齐方式，防止偏移失真
)

3. 预精确缩放位图 #

通过dart:ui手动控制缩放流程，使用精准算法生成目标尺寸图像：

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:async';

Future<Uint8List> resizeImage(Uint8List imageData, int targetWidth, int targetHeight) async {
  ui.Codec codec = await ui.instantiateImageCodec(imageData);
  ui.FrameInfo frameInfo = await codec.getNextFrame();
  ui.Image image = frameInfo.image;

  final recorder = ui.PictureRecorder();
  final canvas = Canvas(recorder);
  final scaleX = targetWidth / image.width;
  final scaleY = targetHeight / image.height;

  canvas.scale(scaleX, scaleY);
  canvas.drawImage(image, Offset.zero, Paint()..isAntiAlias = true);

  ui.Picture picture = recorder.endRecording();
  ui.Image resizedImage = await picture.toImage(targetWidth, targetHeight);
  ByteData? byteData = await resizedImage.toByteData(format: ui.ImageByteFormat.png);
  return byteData!.buffer.asUint8List();
}

// 组件中使用
FutureBuilder<Uint8List>(
  future: resizeImage(base64Decode(mobData), 58, 14),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Image.memory(
        snapshot.data!,
        width: 58,
        height: 14,
        isAntiAlias: true,
        filterQuality: FilterQuality.high,
      );
    }
    return const CircularProgressIndicator();
  },
)

4. 调整移动端图像生成参数 #

让移动端生成签名图像时，输出更高分辨率的位图（比如290×70，为目标尺寸的5倍），缩小到58×14时像素密度足够，可大幅降低失真。

内容的提问来源于stack exchange，提问作者Dharani