Flutter图片水印插件watermark_image的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter图片水印插件watermark_image的使用

Watermark Image

Watermark Image 是一个用于在图片上添加文字水印的 Flutter 插件。它基于 image 包。

示例代码

要在图片上添加水印文本，可以使用以下参数：image 和 waterMarkText。此方法返回一个包含水印的图像文件。

final waterMarkedImg = await WatermarkImage.addWaterMarkToPhoto(
                    image: File(pickedImage!.path), waterMarkText: "new waterMarkText");

特性

Watermark Image 是一个用于在图片上添加文字水印的 Flutter 插件。

使用步骤

以下是一个完整的示例代码，展示了如何使用 watermark_image 插件在图片上添加水印：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:watermark_image/watermark_image.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Watermark Image'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? waterMarkedImg;
  XFile? img;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MaterialButton(
              onPressed: () async {
                ImagePicker picker = ImagePicker();
                img = await picker.pickImage(
                    source: ImageSource.camera, imageQuality: 10);

                waterMarkedImg = await WatermarkImage.addWaterMarkToPhoto(
                    image: File(img!.path), waterMarkText: "new waterMarkText");
                setState(() {});
              },
              child: const Text("点击选择图片"),
            ),
            waterMarkedImg != null
                ? Image.file(waterMarkedImg!)
                : const SizedBox.shrink()
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用watermark_image插件来给图片添加水印的示例代码。watermark_image插件允许你轻松地在图片上添加文本或图片水印。

首先，你需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  watermark_image: ^x.y.z  # 请替换为最新版本号

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

接下来，下面是一个完整的示例代码，展示如何使用watermark_image插件：

import 'package:flutter/material.dart';
import 'package:watermark_image/watermark_image.dart';
import 'dart:ui' as ui;
import 'dart:typed_data';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Watermark Image Example'),
        ),
        body: WatermarkExample(),
      ),
    );
  }
}

class WatermarkExample extends StatefulWidget {
  @override
  _WatermarkExampleState createState() => _WatermarkExampleState();
}

class _WatermarkExampleState extends State<WatermarkExample> {
  Uint8List? watermarkedImageBytes;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () async {
              setState(() {
                _addWatermark();
              });
            },
            child: Text('Add Watermark'),
          ),
          if (watermarkedImageBytes != null)
            Image.memory(
              watermarkedImageBytes!,
              width: 300,
              height: 300,
            ),
        ],
      ),
    );
  }

  Future<void> _addWatermark() async {
    // 加载原始图片
    final ByteData imageData = await rootBundle.load('assets/your_image.png');
    final Uint8List imageBytes = imageData.buffer.asUint8List();
    final ui.Codec codec = await ui.instantiateImageCodec(imageBytes);
    final ui.FrameInfo frameInfo = await codec.getNextFrame();
    final ui.Image image = frameInfo.image;

    // 创建一个水印图片（这里使用文本水印作为示例）
    final TextPainter textPainter = TextPainter(
      text: TextSpan(
        text: 'Watermark',
        style: TextStyle(color: Colors.white, fontSize: 30),
      ),
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr,
    )..layout(minWidth: 0, maxWidth: double.infinity);

    // 创建一个Canvas来绘制水印
    final PictureRecorder recorder = PictureRecorder();
    final Canvas canvas = Canvas(recorder);
    final Size size = Size(image.width.toDouble(), image.height.toDouble());
    canvas.drawImage(image, Offset.zero, Paint());

    // 计算文本位置（这里简单放置在图片中心）
    final Offset textPosition = Offset(
      (size.width - textPainter.width) / 2,
      (size.height - textPainter.height) / 2,
    );

    // 绘制文本水印
    textPainter.paint(canvas, textPosition);

    // 创建一个包含水印的图片
    final Picture picture = recorder.endRecording();
    final ImageByteFormat format = ImageByteFormat.png;
    final Uint8List watermarkedImageBytes = await picture.toImageBytes(format: format);

    // 更新状态
    setState(() {
      this.watermarkedImageBytes = watermarkedImageBytes;
    });
  }
}

注意事项：

  1. 在使用rootBundle.load('assets/your_image.png')加载图片时，请确保在pubspec.yaml中声明了图片资源，例如：
flutter:
  assets:
    - assets/your_image.png

  1. 上述代码示例使用了文本水印。如果你需要使用图片水印，可以使用drawImage方法在Canvas上绘制另一个图片。

  2. watermark_image插件本身提供了更高层次的API来处理水印，但这里为了展示原理，使用了Canvas手动绘制。如果你希望使用插件的简化API，请参考插件的官方文档。

  3. 在实际项目中，请处理异常和错误情况，例如图片加载失败或水印绘制错误。

希望这个示例对你有帮助！

回到顶部