Flutter 中 Image 图像便捷添加图片水印或者文字水印

1,637 阅读7分钟

[》跳过拾光记忆]

拾光记忆

1. Flutter 项目资产管理,看这一篇就够了!

简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。
推荐: ⭐️⭐️⭐️⭐️⭐️

2. Flutter 手势在多指触摸时一些方法会多次触发

简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。
推荐: ⭐️⭐️⭐️⭐️⭐️

3. Dart 的枚举类型的高阶用法

简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。
推荐: ⭐️⭐️⭐️

4. Flutter 可以快速实现单项或者多项选择,你知道吗?

简介: 这是让开发者更加便捷的实现单选、多选功能,无需你对数据处理。
推荐: ⭐️⭐️⭐️⭐️⭐️

5. Flutter 的吸收指针和忽略指针的作用以及区别

简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。
推荐: ⭐️⭐️⭐️

6. Flutter 项目滑动轨道的高阶用法

简介: 这是让开发者更加便捷的实现多种样式的轨道滑块,比如:轨道渐变色、触控笔悬浮标等。
推荐: ⭐️⭐️⭐️⭐️⭐️

7. Flutter 的 Debug 日志管理,可自定义多种输出样式

简介: 这是让开发者更加便捷的实现多种样式的轨道滑块,比如:轨道渐变色、触控笔悬浮标等。
推荐: ⭐️⭐️⭐️⭐️⭐️

[返回拾光记忆《]

一、简述

在当前知识产权时代,各种平台均对其平台上的图像进行水印添加。有些平台甚至针对自身产品的水印处理收取业务费用。目前,水印在社会中的重要性不言而喻。那么在开发中,我们如何快速实现水印功能呢?小编推荐 IDKit 开发包,它为开发者提供了便捷快速的图像添加水印功能。

二、WMarkImage 介绍

WMarkImageIDKit 开发包对FlutterImage 图像进行扩展来实现水印功能的。WMarkImage 提供能为图片添加图像水印和文字水印的功能,可以设置水印的透明度、大小、水平偏移、垂直偏移、旋转角度、是否释放图像资源以及文字水印的样式、最小以及最大宽度、最大行数等。 WMarkImage 的使用方法如下:

  1. 首先要在项目中引入IDKit 包。
  2. 在要使用的该功能的文件的头部引用 import 'package:idkit/idkit.dart';

注意: 该水印功能实现IDKit0.3.2 版本添加的。

三、 WMarkImage 方法和参数

1. 方法

WMarkImage 提供了四个方法进行水印处理,方法如下:

  • Future<Image> addWaterMarkImage(xx ...)
  • Future<Image> addWaterMarkText(xx ...)
  • Image addWaterMarkImageSync(xx ...)
  • Image addWaterMarkTextSync(xx ...)

从上可以看出提供同步和异步处理水印的方法, 使用者可根据需求选择。

2. 参数
  • Image wmImg
    该参数是要添加的水印图像的对象。
  • WMLocation location = WMLocation.tile
    该参数是要添加水印在图像中的位置,默认是: 铺满模式
  • double opacity = 0.3
    该参数是要添加水印的不透明度,默认是 0.3。
  • double sizeScale = 1
    该参数是要添加水印图像的尺寸大小,默认是 1。
  • double vOffset = 20, double hOffset = 20,
    该参数是要添加水印在图像的水平以及垂直方向的偏移,默认 20 像素。
  • double angle = 0
    该参数是要添加水印在图像上的旋转角度,比如: 30° 、 45° 、90° 等,默认是: 0° 。
  • bool srcDispose = false
    该参数是设置是否释放原始图像。如果为true, 则原始图像将被从内存中清除,如果再使用它,将抛出异常。默认: false 不释放。
  • bool wmDispose = false
    该参数是设置是否释放水印图像。如果为true, 则水印图像将被从内存中清除,如果再使用它,将抛出异常。默认: false 不释放。
  • String text
    该参数是文字水印的文字对象。
  • TextStyle style = const TextStyle()
    该参数是文字水印文字样式。
  • TextDirection textDirection = TextDirection.ltr
    该参数是文字水印文字样式文字显示方向。
  • int? maxLines 该参数是文字水印的文字可展示的最大行数。默认是 6 行。
  • double? minWidth,double? maxWidth,
    该参数是文字水印的文字可展示的最小宽度和最大宽度。
  • bool isDispose = false,
    srcDispose 解释。

四、WMarkImage 的应用

1. 图片水印添加

    1. 同步添加,默认样式

      swmImage = srcImg!.addWaterMarkImageSync(wmImg!);
      

      显示效果如下:

      wm1.png 该模式默认平铺,从上图可以看出水印图像过大。

    1. 修改水印尺寸
      我们修改水印大小,代码如下:

      swmImage = srcImg!.addWaterMarkImageSync(
        wmImg!,
        sizeScale: 0.5,
      );
      

      显示效果如下:

      wm2.png

    1. 修改水印旋转角度
      我们还可以设置水印角度,代码如下:

      swmImage = srcImg!.addWaterMarkImageSync(
        wmImg!,
        sizeScale: 0.2,
        angle: 45,
      );
      

      显示效果如下:

      wm3.png

    1. 修改水印水平或者垂直方向偏移
      我们也可以调整水印的水平或者处置偏移,代码如下:

      swmImage = srcImg!.addWaterMarkImageSync(
        wmImg!,
        sizeScale: 0.2,
        angle: 45,
        vOffset: 60,
        hOffset: 60,
      );
      

      显示效果(和上图对比看):

      wm4.png

    1. 修改水印展示位置
      我们可以调整水印展示模式,代码如下:

      swmImage = srcImg!.addWaterMarkImageSync(
        wmImg!,
        location: WMLocation.bottomRight,
        sizeScale: 0.2,
        angle: 45,
        vOffset: 60,
        hOffset: 60,
      );
      

      显示效果(右下):

      wm5.png 显示效果(左中):

      wm6.png

      水印位置还有很多,就不一一展示。 水印的旋转都是以展示位置为中心旋转的。

    1. 释放水印图
      我们可以释放水印图或者原始图,代码如下:

      swmImage = srcImg!.addWaterMarkImageSync(
        wmImg!,
        location: WMLocation.centerLeft,
        sizeScale: 0.2,
        srcDispose: true,
        wmDispose: true,
      );
      

      释放完毕后,图像就不能再被使用。

    1. 异步添加图像水印
      异步添加图像水印,在代码编写方面比同步添加更为方便一点,代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkImage(wmImg!),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 200,
                height: 200,
              );
            }
          }
          return Container();
        },
      )
      
    1. 总结:
      异步添加图片水印的方式和同步只是调用方式不同,参数是相同的。

2. 文字水印添加

    1. 异步默认样式,代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText('IDKit 专属水印'),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx1.png

    1. 修改文字尺寸大小, 代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText('IDKit 专属水印', sizeScale: 0.5),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx2.png

    1. 修改字体大小、颜色等, 代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText(
          'IDKit 专属水印',
          style: const TextStyle(
            fontSize: 20,
            color: Colors.yellow,
            height: 2,
          ),
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx3.png

    1. 修改文字水印显示位置,代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText(
          '@IDKit 专属水印',
          location: WMLocation.bottomRight,
          style: const TextStyle(
            fontSize: 20,
            color: Colors.yellow,
            height: 2,
          ),
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx4.png

    1. 修改文字显示最大宽度,代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText(
          '专属水印1专属水印2',
          location: WMLocation.bottomRight,
          style: const TextStyle(
            fontSize: 20,
            color: Colors.yellow,
            height: 1,
          ),
          maxWidth: 100,
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx5.png

      我们从上图看出,水印文字发生换行。

    1. 修改文字最大行数,代码如下:

      FutureBuilder<Image>(
        future: srcImg!.addWaterMarkText(
          '专属水印1专属水印2专属水印3,专属水印4',
          location: WMLocation.bottomRight,
          style: const TextStyle(
            fontSize: 20,
            color: Colors.yellow,
            height: 1,
          ),
          maxWidth: 100,
          maxLines: 3,
        ),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting ||
              snapshot.connectionState == ConnectionState.active) {
            return const Text('加载中...');
          }
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return const Text('加载失败...');
            } else {
              wmImg = snapshot.data!;
              return IDKitImage.image(
                image: snapshot.data!,
                width: 750,
                height: 500,
              );
            }
          }
          return Container();
        },
      )
      

      显示效果如下:

      tx6.png 从上图可以看出,超出的文字将不展示。

    1. 总结:
      同步添加文字水印的方式和异步只是调用方式不同,参数是相同的。

五、 总结

使用 IDKit 包,开发者可以轻松地将水印添加到图像中,而无需编写繁琐的代码。这个包提供了多种水印样式,例如文本、图片等,并且支持自定义水印的字体、颜色、大小等属性,以满足不同的需求。总之,使用 IDKit 包,可以轻松实现图像添加水印的功能,让开发者更加专注于应用的核心业务开发。如果喜欢,请留下你的小心心 ❤️ (ˆ◡ˆԅ) 。