Flutter如何在用户分享图片时为图片添加文字或图标水印

1. 新增依赖 #

在pubspec.yaml中添加图片处理依赖：

dependencies:
  flutter:
    sdk: flutter
  image: ^4.1.3 # 可替换为当前最新稳定版
  http: ^1.1.0
  path_provider: ^2.1.1
  share_plus: ^7.2.1

如果需要使用本地图标作为水印，还需要在pubspec.yaml中声明资源路径：

flutter:
  assets:
    - assets/watermark_icon.png

2. 完整实现代码 #

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';
import 'package:image/image.dart' as img;

void sharePhoto(String imageUrl) async {
  // 1. 下载原图
  final response = await http.get(Uri.parse(imageUrl));
  final originalImageBytes = response.bodyBytes;
  // 解码原图
  img.Image? originalImage = img.decodeJpg(originalImageBytes);
  if (originalImage == null) return;

  // 2. 添加文字水印
  img.drawString(
    originalImage,
    '自定义水印文字',
    font: img.arial48, // 若需中文水印需替换为自定义中文字体
    x: 20, // 水印x轴坐标
    y: originalImage.height - 100, // 水印y轴坐标，示例放在左下角
    color: img.ColorRgba8(255, 255, 255, 180), // 白色半透明
  );

  // 3. 添加图标水印（不需要可删除此段）
  // 加载本地水印图标
  final iconByteData = await rootBundle.load('assets/watermark_icon.png');
  final iconBytes = iconByteData.buffer.asUint8List();
  img.Image? watermarkIcon = img.decodePng(iconBytes);
  if (watermarkIcon != null) {
    // 调整水印图标大小
    final resizedIcon = img.copyResize(watermarkIcon, width: 80, height: 80);
    // 绘制到原图右上角
    img.compositeImage(
      originalImage,
      resizedIcon,
      dstX: originalImage.width - 100,
      dstY: 20,
      opacity: 0.7, // 图标透明度
    );
  }

  // 4. 编码处理后的图片为jpg
  final processedImageBytes = img.encodeJpg(originalImage);
  // 写入临时文件
  final tempDir = await getTemporaryDirectory();
  final targetPath = '${tempDir.path}/processed_share_image.jpg';
  await File(targetPath).writeAsBytes(processedImageBytes);

  // 5. 分享图片
  await Share.shareFiles([targetPath], text: '自定义分享文案');
}

注意事项 #

• 中文水印适配：默认内置字体不支持中文，若需添加中文水印，需将中文字体文件（如思源黑体）放入assets目录，使用img.readFont()方法加载字体后传入drawString的font参数即可避免乱码。
• 水印位置调整：修改绘制时的x、y参数即可调整水印在图片上的位置，可结合原图宽高计算实现左上、右上、左下、右下等不同位置的水印布局。
• 性能优化：如果处理的是高分辨率大图，可先对原图进行压缩再添加水印，避免内存占用过高。

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