Flutter图片编辑水印插件flutter_image_edit_watermark的使用

Flutter图片编辑水印插件flutter_image_edit_watermark的使用

开始使用

本项目是一个用于Flutter的插件包,包括Android和/或iOS平台的具体实现代码。

对于如何开始使用Flutter开发,可以查看在线文档,其中包含教程、示例、移动开发指南以及完整的API参考。

完整示例

以下是一个使用flutter_image_edit_watermark插件添加水印的完整示例:

示例代码

import 'dart:io';

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:flutter_image_edit_watermark/flutter_image_edit_watermark.dart';
import 'package:image_picker/image_picker.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知';
  final _flutterImageEditWatermarkPlugin = FlutterImageEditWatermark();

  String? imagePath;
  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 异步初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败,所以我们使用try/catch来处理PlatformException。
    // 我们还处理消息可能返回null的情况。
    try {
      platformVersion =
          await _flutterImageEditWatermarkPlugin.getPlatformVersion() ?? '未知平台版本';
    } on PlatformException {
      platformVersion = '获取平台版本失败。';
    }

    // 如果在异步平台消息还在飞行时小部件被从树中移除,我们应该丢弃回复而不是调用setState来更新我们不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: Column(
            children: [
              TextButton(
                child: Text('相机'),
                onPressed: () {
                  _onCameraPickerPressed();
                },
              ),
              if (imagePath != null) Image.file(File(imagePath!))
            ],
          ),
        ),
      ),
    );
  }

  void _onCameraPickerPressed() async {
    // 从图库中选择图片
    final image = await ImagePicker().pickImage(source: ImageSource.gallery);

    String? path = image?.path;
    print("文件路径: $path");

    if (path == null) return;

    // 水印文本
    String text = "07:55 pm 11/03/2022\n拍摄于Xiao 50\nCupertino CA";

    // 编辑图片并添加水印
    var file = await _flutterImageEditWatermarkPlugin.editImage(path!, text);

    print("处理后的文件路径: $file");

    // 更新UI
    setState(() {
      imagePath = file;
    });
  }
}

运行示例

  1. 确保你已经在你的Flutter项目中添加了flutter_image_edit_watermarkimage_picker依赖项。
  2. 将上述代码复制到你的main.dart文件中。
  3. 运行应用程序,并点击“相机”按钮从图库中选择一张图片。
  4. 输入水印文本,点击确定后,图片将被处理并在界面上显示出来。

通过以上步骤,你可以成功地在Flutter应用中使用flutter_image_edit_watermark插件来给图片添加水印。


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

1 回复

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


当然,下面是一个关于如何使用 flutter_image_edit_watermark 插件的示例代码。这个插件允许你在Flutter应用中为图片添加水印。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_image_edit_watermark 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_image_edit_watermark: ^最新版本号  # 请替换为最新版本号

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

接下来,你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例代码,展示了如何加载一张图片,并为其添加水印:

import 'package:flutter/material.dart';
import 'package:flutter_image_edit_watermark/flutter_image_edit_watermark.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: WatermarkPage(),
    );
  }
}

class WatermarkPage extends StatefulWidget {
  @override
  _WatermarkPageState createState() => _WatermarkPageState();
}

class _WatermarkPageState extends State<WatermarkPage> {
  Uint8List? imageBytes;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Image Edit Watermark Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                // 加载图片资源(这里使用本地资源,你可以根据需要改为网络图片或其他方式)
                final ByteData byteData = await rootBundle.load('assets/your_image.png');
                imageBytes = byteData.buffer.asUint8List();
                
                // 添加水印
                final watermarkedImage = await addWatermarkToImage(imageBytes!);
                
                // 显示或保存水印图片(这里简单地在Image.memory中显示)
                setState(() {
                  imageBytes = watermarkedImage;
                });
              },
              child: Text('Add Watermark'),
            ),
            SizedBox(height: 20),
            if (imageBytes != null) Image.memory(imageBytes!),
          ],
        ),
      ),
    );
  }

  Future<Uint8List?> addWatermarkToImage(Uint8List imageBytes) async {
    try {
      // 加载图片
      final image = await decodeImageFromList(imageBytes);
      
      // 创建绘制层
      final canvas = Canvas(image);
      final paint = Paint()
        ..color = Colors.redAccent.withOpacity(0.5)
        ..fontSize = 30.0
        ..style = PaintingStyle.fill;
      
      // 添加水印文本
      final textPainter = TextPainter(
        text: TextSpan(text: 'Watermark', style: TextStyle(color: Colors.redAccent)),
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr,
      )..layout(minWidth: 0, maxWidth: double.infinity);
      
      // 计算水印位置(这里简单地在图片右下角)
      final offsetX = image.width - textPainter.width - 10;
      final offsetY = image.height - textPainter.height - 10;
      
      // 绘制水印
      canvas.drawText(textPainter, Offset(offsetX, offsetY));
      
      // 将图片编码为Uint8List
      final recorder = PictureRecorder();
      final canvas2 = Canvas(recorder);
      canvas2.drawImage(image, Offset.zero);
      final picture = recorder.endRecording();
      final imgData = await picture.toImage(image.width, image.height);
      final byteData = await imgData.toByteData(format: ui.ImageByteFormat.png);
      
      return byteData!.buffer.asUint8List();
    } catch (e) {
      print('Error adding watermark: $e');
      return null;
    }
  }
}

注意事项:

  1. 确保在 pubspec.yaml 文件中添加了图片资源并正确引用,例如:
    flutter:
      assets:
        - assets/your_image.png
    
  2. 上述代码示例中,水印是简单地在图片右下角绘制了一段文本。你可以根据需要自定义水印的内容、位置、样式等。
  3. flutter_image_edit_watermark 插件本身可能具有更高级的功能和更简洁的API,请参考其官方文档以获取最新和最准确的使用方式。上述代码仅为示例,展示了如何使用Flutter的基础绘图功能来实现水印效果。
回到顶部