Flutter图片水印插件watermark_img的使用

关于watermark_img

创建watermark_img的目的是为了向图片添加一个控件。例如，如果你想在图片上添加文本，无论位置是在左上角、右上角还是底部，都可以根据使用的控件来决定。

如何使用

首先，在pubspec.yaml文件中导入该包：

dependencies:
  watermark_img: 0.0.6

然后运行flutter pub get以获取依赖项。

基础功能

在example/main.dart中已经创建了基本用法的示例。你可以直接调用该小部件。

导入

import 'package:watermark_img/watermark_img.dart';

使用示例

ScreenWatermark(
  child: Stack(
    children: [
      Image.network(
        'https://randomuser.me/api/portraits/men/60.jpg',
        fit: BoxFit.cover,
        width: double.infinity,
        height: 300,
      ),
      const Center(
        child: Text(
          'Watermark',
          style: TextStyle(
            fontSize: 30,
            color: Colors.red,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  )),

在ScreenWatermark中，child参数是必需的，并且可以与任何你想要的控件组合使用。

保存图片

对于保存图片的过程，可以与其他包结合使用。可以在example/main.dart中查看更多细节。下面是一个启动保存过程的按钮示例。

ElevatedButton(
  onPressed: () async {
    final Uint8List? bytes =
        await WaterMarkImg.convertImgToUint(renderKey: KeyWatermark().key);
    if (bytes != null) {
      final File? file = await WaterMarkImg()
          .saveImageFromUint8List(bytes, 'watermark.png');

      setState(() {
        fileImage = XFile(file!.path);
      });
      if (file != null) {
        if (Platform.isAndroid) {
          final deviceInfo = DeviceInfoPlugin();
          final androidSdk = await deviceInfo.androidInfo;
          if (androidSdk.version.sdkInt >= 33) {
            if (await _requestPhotosPermission()) {
              final directory = await getTemporaryDirectory();
              final file = File('${directory.path}/watermark.png');
              await file.writeAsBytes(bytes);
              final result = await ImageGallerySaver.saveImage(bytes);
              if (result != null) {
                // 打印保存成功信息
                fileImage = XFile(file.path);
              }
            }
          } else {
            if (await _requestStoragePermission()) {
              final directory = await getTemporaryDirectory();
              final file = File('${directory.path}/watermark.png');
              await file.writeAsBytes(bytes);
              final result = await ImageGallerySaver.saveFile(file.path);
              if (result != null) {
                // 打印保存成功信息
                fileImage = XFile(file.path);
              }
            }
          }
        } else if (Platform.isIOS) {
          final directory = await getTemporaryDirectory();
          final file = File('${directory.path}/watermark.png');
          await file.writeAsBytes(bytes);
          final result = await ImageGallerySaver.saveImage(bytes);
          if (result != null) {
            // 打印保存成功信息
            fileImage = XFile(file.path);
          }
        }
      }
    }
  },
  child: const Text("检查并保存图片"),
)

保存器（新版本 0.0.5）

var toFile = File(fileImage!.path); // 将XFile转换为File
toFile.toBase64().then((value) {
  if (kDebugMode) {
    print(value); // 打印base64
  }
});

sinazl 1楼•3 个月前

更多关于Flutter图片水印插件watermark_img的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

watermark_img 是一个 Flutter 插件，用于在图片上添加水印。它可以方便地为图片添加文本或图片水印。以下是使用 watermark_img 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 watermark_img 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  watermark_img: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 watermark_img 插件：

import 'package:watermark_img/watermark_img.dart';

3. 使用插件

添加文本水印

你可以使用 Watermark.addTextWatermark 方法为图片添加文本水印：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:watermark_img/watermark_img.dart';

class WatermarkExample extends StatelessWidget {
  Future<void> addWatermark() async {
    // 加载原始图片
    final imageFile = File('path/to/your/image.jpg');

    // 添加文本水印
    final watermarkedImage = await Watermark.addTextWatermark(
      imageFile.readAsBytesSync(),  // 图片的字节数据
      "Your Watermark Text",        // 水印文本
      textColor: Colors.white,      // 文本颜色
      fontSize: 30,                 // 字体大小
      position: WatermarkPosition.center,  // 水印位置
    );

    // 保存或显示水印图片
    final outputFile = File('path/to/output/image.jpg');
    outputFile.writeAsBytesSync(watermarkedImage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Watermark Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: addWatermark,
          child: Text('Add Watermark'),
        ),
      ),
    );
  }
}

添加图片水印

你也可以使用 Watermark.addImageWatermark 方法为图片添加图片水印：

Future<void> addImageWatermark() async {
  // 加载原始图片
  final imageFile = File('path/to/your/image.jpg');

  // 加载水印图片
  final watermarkFile = File('path/to/your/watermark.png');

  // 添加图片水印
  final watermarkedImage = await Watermark.addImageWatermark(
    imageFile.readAsBytesSync(),  // 原始图片的字节数据
    watermarkFile.readAsBytesSync(),  // 水印图片的字节数据
    position: WatermarkPosition.bottomRight,  // 水印位置
  );

  // 保存或显示水印图片
  final outputFile = File('path/to/output/image.jpg');
  outputFile.writeAsBytesSync(watermarkedImage);
}