Flutter中如何将assets下的SVG资源转换为PNG并写入本地文件？

前置依赖 #

首先在pubspec.yaml中添加必要依赖，你现有代码已用到的path_provider如果没有安装也需要补充：

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.0
  flutter_svg: ^2.0.7 # 用于解析、渲染SVG文件
  image: ^4.1.3 # 用于图片格式转换

添加完成后执行flutter pub get安装依赖。

完整实现代码 #

import 'dart:ui' as ui;
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter_svg/flutter_svg.dart';

Future<File> convertSvgToPngFromAssets(String assetPath, String outputFileName) async {
  // 1. 加载assets中的SVG资源
  final svgBytes = await rootBundle.load(assetPath);
  final Uint8List svgUint8List = svgBytes.buffer.asUint8List(
    svgBytes.offsetInBytes, 
    svgBytes.lengthInBytes
  );

  // 2. 解析SVG并渲染为ui.Image对象，默认取SVG原尺寸，可自定义修改宽高参数
  final pictureInfo = await vg.loadPicture(SvgBytesLoader(svgUint8List), null);
  final ui.Image renderedImage = await pictureInfo.picture.toImage(
    pictureInfo.size.width.round(),
    pictureInfo.size.height.round()
  );

  // 3. 将渲染后的图片转换为PNG格式字节
  final pngByteData = await renderedImage.toByteData(format: ui.ImageByteFormat.png);
  final pngUint8List = pngByteData!.buffer.asUint8List();

  // 4. 写入本地文件
  final tempPath = (await getTemporaryDirectory()).path;
  final outputFile = File('$tempPath/$outputFileName.png');
  await outputFile.writeAsBytes(pngUint8List);

  // 释放资源避免内存泄漏
  pictureInfo.picture.dispose();
  renderedImage.dispose();

  return outputFile;
}

调用示例 #

// 传入SVG资产路径和输出文件名，直接获取生成的PNG文件
File pngFile = await convertSvgToPngFromAssets('assets/images/example.svg', 'profile');

补充说明 #

• 如果需要自定义输出PNG的尺寸，直接修改toImage方法传入的宽高数值即可
• 如果不需要保存到临时目录，可将getTemporaryDirectory()替换为getApplicationDocumentsDirectory()等其他存储路径

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