[》跳过拾光记忆]
拾光记忆
1. Flutter 项目资产管理,看这一篇就够了!
简介: 针对 Flutter 项目资产管理的脚本服务。Fam 具有以下特点: 支持多种平台以及各平台无差异化、界面美观、功能齐全、快捷方便。
推荐: ⭐️⭐️⭐️⭐️⭐️
2. Flutter 手势在多指触摸时一些方法会多次触发
简介: 针对 Flutter 多手指检测以及手势触发其他手势也触发的问题。
推荐: ⭐️⭐️⭐️⭐️⭐️
3. Dart 的枚举类型的高阶用法
简介: 这是让开发者更深入的了解 Dart 的枚举以及相关使用和方法。
推荐: ⭐️⭐️⭐️
4. Flutter 可以快速实现单项或者多项选择,你知道吗?
简介: 这是让开发者更加便捷的实现单选、多选功能,无需你对数据处理。
推荐: ⭐️⭐️⭐️⭐️⭐️
5. Flutter 的吸收指针和忽略指针的作用以及区别
简介: 这是让开发者更深入的了解 Flutter 的两种指针的介绍以及相关使用和方法。
推荐: ⭐️⭐️⭐️
6. Flutter 项目滑动轨道的高阶用法
简介: 这是让开发者更加便捷的实现多种样式的轨道滑块,比如:轨道渐变色、触控笔悬浮标等。
推荐: ⭐️⭐️⭐️⭐️⭐️
7. Flutter 的 Debug 日志管理,可自定义多种输出样式
简介: 这是让开发者更加便捷的实现多种样式的轨道滑块,比如:轨道渐变色、触控笔悬浮标等。
推荐: ⭐️⭐️⭐️⭐️⭐️
[返回拾光记忆《]
一、简述
在当前知识产权时代,各种平台均对其平台上的图像进行水印添加。有些平台甚至针对自身产品的水印处理收取业务费用。目前,水印在社会中的重要性不言而喻。那么在开发中,我们如何快速实现水印功能呢?小编推荐 IDKit 开发包,它为开发者提供了便捷快速的图像添加水印功能。
二、WMarkImage 介绍
WMarkImage 是 IDKit 开发包对Flutter 的Image 图像进行扩展来实现水印功能的。WMarkImage 提供能为图片添加图像水印和文字水印的功能,可以设置水印的透明度、大小、水平偏移、垂直偏移、旋转角度、是否释放图像资源以及文字水印的样式、最小以及最大宽度、最大行数等。 WMarkImage 的使用方法如下:
- 首先要在项目中引入IDKit 包。
- 在要使用的该功能的文件的头部引用
import 'package:idkit/idkit.dart';
注意: 该水印功能实现IDKit 包0.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. 图片水印添加
-
-
同步添加,默认样式
swmImage = srcImg!.addWaterMarkImageSync(wmImg!);
显示效果如下:
该模式默认平铺,从上图可以看出水印图像过大。
-
-
-
修改水印尺寸
我们修改水印大小,代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.5, );
显示效果如下:
-
-
-
修改水印旋转角度
我们还可以设置水印角度,代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.2, angle: 45, );
显示效果如下:
-
-
-
修改水印水平或者垂直方向偏移
我们也可以调整水印的水平或者处置偏移,代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, sizeScale: 0.2, angle: 45, vOffset: 60, hOffset: 60, );
显示效果(和上图对比看):
-
-
-
修改水印展示位置
我们可以调整水印展示模式,代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, location: WMLocation.bottomRight, sizeScale: 0.2, angle: 45, vOffset: 60, hOffset: 60, );
显示效果(右下):
显示效果(左中):
水印位置还有很多,就不一一展示。 水印的旋转都是以展示位置为中心旋转的。
-
-
-
释放水印图
我们可以释放水印图或者原始图,代码如下:swmImage = srcImg!.addWaterMarkImageSync( wmImg!, location: WMLocation.centerLeft, sizeScale: 0.2, srcDispose: true, wmDispose: true, );
释放完毕后,图像就不能再被使用。
-
-
-
异步添加图像水印
异步添加图像水印,在代码编写方面比同步添加更为方便一点,代码如下: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(); }, )
-
-
- 总结:
异步添加图片水印的方式和同步只是调用方式不同,参数是相同的。
- 总结:
2. 文字水印添加
-
-
异步默认样式,代码如下:
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(); }, )
显示效果如下:
-
-
-
修改文字尺寸大小, 代码如下:
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(); }, )
显示效果如下:
-
-
-
修改字体大小、颜色等, 代码如下:
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(); }, )
显示效果如下:
-
-
-
修改文字水印显示位置,代码如下:
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(); }, )
显示效果如下:
-
-
-
修改文字显示最大宽度,代码如下:
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(); }, )
显示效果如下:
我们从上图看出,水印文字发生换行。
-
-
-
修改文字最大行数,代码如下:
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(); }, )
显示效果如下:
从上图可以看出,超出的文字将不展示。
-
-
- 总结:
同步添加文字水印的方式和异步只是调用方式不同,参数是相同的。
- 总结:
五、 总结
使用 IDKit 包,开发者可以轻松地将水印添加到图像中,而无需编写繁琐的代码。这个包提供了多种水印样式,例如文本、图片等,并且支持自定义水印的字体、颜色、大小等属性,以满足不同的需求。总之,使用 IDKit 包,可以轻松实现图像添加水印的功能,让开发者更加专注于应用的核心业务开发。如果喜欢,请留下你的小心心 ❤️ (ˆ◡ˆԅ) 。