Flutter中能否在背景图上绘图并保留原尺寸分辨率保存？

你可以使用以下两个常用包来实现直接在原图上绘图并保留原尺寸分辨率的需求：

1. image 包（纯Dart实现） #

这是一个轻量的纯Dart图像处理库，支持直接操作图像像素、绘制图形和文本，完全不依赖组件尺寸，直接基于原图数据处理。

使用步骤： #

• 添加依赖到pubspec.yaml：

  dependencies:
    image: ^4.0.17 # 建议使用最新版本
  

• 核心代码示例：

  import 'package:image/image.dart' as img;
  import 'dart:io';
  
  Future<void> drawOnOriginalImage() async {
    // 读取本地原图文件
    final originalFile = File('/storage/emulated/0/test.jpg');
    final imageBytes = await originalFile.readAsBytes();
    final originalImage = img.decodeImage(imageBytes)!;
  
    // 创建画布，直接基于原图操作
    final canvas = img.Canvas(originalImage);
    // 设置画笔样式
    final redPaint = img.Paint()
      ..color = img.ColorRgb8(255, 0, 0)
      ..strokeWidth = 4;
  
    // 在原图上绘制图形
    canvas.drawLine(50, 50, 200, 200, redPaint);
    canvas.drawCircle(300, 300, 50, redPaint);
  
    // 编码并保存修改后的图像（保持原尺寸分辨率）
    final modifiedBytes = img.encodeJpg(originalImage, quality: 95);
    await File('/storage/emulated/0/modified_test.jpg').writeAsBytes(modifiedBytes);
  }
  

2. flutter_image_editor 包（Native实现） #

基于Android和iOS原生图像处理能力，支持更复杂的图层操作、滤镜、文字绘制等，性能更优，适合处理大尺寸图像。

核心特点： #

• 直接基于原图像素操作，不受组件尺寸限制
• 支持添加文字、图形、贴纸等多种元素
• 保留原图的分辨率和EXIF信息

简单使用示例： #

import 'package:flutter_image_editor/flutter_image_editor.dart';
import 'dart:io';

Future<void> editImageWithNative() async {
  final file = File('/storage/emulated/0/test.jpg');
  final editor = ImageEditor();

  // 构建绘图指令
  final commands = [
    DrawTextCommand(
      text: "Flutter绘图",
      offset: Offset(100, 100),
      textStyle: TextStyle(
        color: Colors.red,
        fontSize: 32,
        fontWeight: FontWeight.bold,
      ),
    ),
    DrawLineCommand(
      start: Offset(50, 50),
      end: Offset(200, 200),
      color: Colors.blue,
      strokeWidth: 5,
    ),
  ];

  // 执行编辑并保存
  final result = await editor.editImage(
    image: file.readAsBytesSync(),
    commands: commands,
  );
  await File('/storage/emulated/0/edited_test.jpg').writeAsBytes(result);
}

总结： #

• 若需求简单、希望纯Dart实现，优先选image包
• 若需要复杂编辑功能或更好的性能，选择flutter_image_editor包

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