Flutter 中 Image 图像的高阶用法，你知道多少？

半醉看夕阳
3,213 阅读7分钟

[》跳过拾光记忆]

拾光记忆

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

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

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

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

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

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

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

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

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

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

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

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

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

简介: 这是让开发者更加便捷的查看日志，通过日志能够分析变量当前数值以及业务逻辑走势，同时也能作为日志收集日志文本。
推荐: ⭐️⭐️⭐️⭐️⭐️

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

简介: 这是让开发者更加便捷的实现图像添加图片类型的水印和文字类型的水印，支持水印多种样式的设定。
推荐: ⭐️⭐️⭐️⭐️⭐️

[返回拾光记忆《]

一、简述

在 Flutter 项目开发中，图像的使用是必不可少的。根据不同的项目需求，某些场景需要的图像也会有所不同。Flutter 官方提供了一些基础方法来处理图像，然而，这些方法并不能满足各种不同项目业务需求。因此，我们将向大家介绍一款便捷的开发包——IDKit。它提供的Image类（请注意，与Image小部件不同）拥有更多的方法和基础方法，能够帮助开发者更加敏捷地开发，使开发变得更加简单。

二、IDKit 之 IImage

IImage 是 IDKit 开发包中专门针对 Image 图像进行类扩展的。它拥有更多便捷的方法，可以让开发者更加方便地获取所需的图像。要发现 IImage 的美妙之处，我们需要一起学习和使用它所拥有的功能。

1、下面介绍IImage 使用前要做引入包的准备。
  1. 手动配置
    安装IDKit需手动进入IDKit的安装页面，将idkit: ^0.3.3复制到你项目的pubspec.yaml文件的dependencies - flutter模块下，之后执行flutter pub get即可完成安装。
  2. 自动配置
    需要你在项目的根目录终端里执行 flutter pub add idkit 指令即可。
2、 使用引入头文件

只需在需要使用该功能的页面头部引入 import 'package:idkit/idkit.dart'; 头文件，即可畅享 IDKit 所提供的各种服务。

下面所有功能需要在 IDKit 包版本大于等于 0.3.3 版本使用。

三、 IImage 提供的方法

  1. size
    使用 IImage 可以直接获取图像的尺寸大小，类型为Size，而不需要再进一步处理转换。相比官方提供的Image只包含宽和高，IImage提供了更为便利的功能。

  2. rect
    使用IImage 可以直接获取以 (0,0) 点为原点的矩形，这常用于绘制图像时 （TODO:可进一步优化）。

  3. uint8List
    使用IImage 可以直接获取图像的 Uint8List 数据，项目官方更加便捷。

  4. uint32List
    使用IImage 可以直接获取图像的 Uint32List 数据，项目官方更加便捷。

  5. changeSizeSync
    使用IImage 可以直接同步的修改图像的尺寸，同时可控制原始图像是否从内存中释放。

  6. changeSize
    使用IImage 可以直接异步的修改图像的尺寸，同时可控制原始图像是否从内存中释放。

  7. scaleSync
    使用IImage 可以直接同步的等比缩放图像的尺寸，同时可控制原始图像是否从内存中释放。

  8. scale
    使用IImage 可以直接异步的等比缩放图像的尺寸，同时可控制原始图像是否从内存中释放。

  9. removalColor
    使用 IImage，可以直接对图像指定颜色进行去除，例如去除图像背景或删除图像中指定颜色。同时，你还可以设置颜色容差值，使得处理更加精确。

  10. realContentSize
    使用 IImage , 可以直接获取图像真实内容的大小，例如: 白色画板上你绘制红色小猫的矩形尺寸大小。

  11. realContentImage
    使用 IImage，可以直接获取图像真实内容的大小，例如在白色画板上绘制红色小猫的图像，并去除白边得到其尺寸大小的图像。

  12. 给图像添加文字或者图片水印，水印功能。

  13. 持续更新..., 关注或者留言你想要的功能。

四、 IImage 的实战使用

我们使用下面代码加载 [1024 x 640] 大小的图像，代码如下:

/// 加载图像
Future<ui.Image> loadImage(String image) async {
  final ImmutableBuffer buffer = await rootBundle.loadBuffer(image);
  final ui.Codec codec = await ui.instantiateImageCodecFromBuffer(buffer);
  final ui.FrameInfo frameInfo = await codec.getNextFrame();
  return frameInfo.image;
}

原始图片展示如下:

im1.png

1. 获取大小
void _incrementCounter() {
  IDKitLog.value(srcImage.size);
}

获取结果如下:

im2.png

2. 获取以 (0,0) 为顶点的矩形
void _incrementCounter() {
  IDKitLog.value(srcImage.rect());
}

获取结果如下:

im3.png

3. 获取图像的 Uint8List
void _incrementCounter() {
  srcImage.uint8List().then((value) {
    IDKitLog.value(value);
  });
}

输出结果如下：(部分)

Im4.png

还支持各种格式的图像的Uint8List 数据，可通过设置 ImageByteFormat format 获取。

4. 获取图像的 Uint32List
void _incrementCounter() {
  srcImage.uint32List().then((value) {
    IDKitLog.value(value);
  });
}

输出结果如下：(部分)

im5.png

还支持各种格式的图像的Uint8List 数据，可通过设置 ImageByteFormat format 获取。

5. 改变图像大小

同步:

void _incrementCounter() {
  final ui.Image cSize = srcImage.changeSizeSync(imgW: 512, imgH: 320);
  IDKitLog.value(cSize);
}

异步：

void _incrementCounter() async {
  final ui.Image cSize = await srcImage.changeSize(imgW: 512, imgH: 320);
  IDKitLog.value(cSize);
}

输出结果,如下:

im6.png

图像显示如下:

im7.png

6. 进行图像的缩放
void _incrementCounter() async {
  final ui.Image scaleImage = await srcImage!.scale(scale: 0.6);
  changeImage = scaleImage;
  IDKitLog.value(changeImage);
  setState(() {});
}

输出结果如下:

im8.png

图像的显示如下:

lm8.png

7. 移除图像某个颜色

该功能常用于处理图像的背景色，代码如下:

void _incrementCounter() async {
  final ui.Image? moveBgImage = await srcImage!.removalColor(color: '#FEF151'.color, tolerance: 1);
  changeImage = moveBgImage!;
  IDKitLog.value(changeImage);
  setState(() {});
}

显示效果如下:

lm8.png

从上图可以看到，图像的去除还是可以的，默认容差值是1。我们注意到图像有些不应该被去掉的也被去除掉了，说明我们的容差值过大了，我们调小容差值，代码如下:

void _incrementCounter() async {
  final ui.Image? moveBgImage = await srcImage!.removalColor(color: '#FEF151'.color, tolerance: 0.4);
  changeImage = moveBgImage!;
  IDKitLog.value(changeImage);
  setState(() {});
}

显示效果如下:

lm9.png

从上图可以看出准确度还是很高的。

8. 获取图像真实内容的大小
void _incrementCounter() async {
  final Rect rect = await srcImage!.realContentSize(ignoreColor: '#FEF151'.color, tolerance: 0.4);
  IDKitLog.value(rect);
  setState(() {});
}

输出结果如下:

lm10.png
从输出的内容来看，该图像中的小鹿是在原图像上左边 241 像素 ； 顶部 79 像素 ； 右边 781 像素； 下边 589 像素 的位置。我们来验证一下:

  • 左边和底部验证如下图:

    了吗1.png

  • 顶部和右边验证如下图:

    lm11.png

从我们验证可知，我们获取图像真实内容精度很高很高。

9. 获取图像真实内容的图像

获取图像真实内容图像，去除多余边框，代码如下：

void _incrementCounter() async {
  final ui.Image relaImg = await srcImage!.realContentImage(ignoreColor: '#FEF151'.color, tolerance: 0.4);
  changeImage = relaImg;
  setState(() {});
}

显示效果如下:

lm12.png

我们还可以保留原始图像的背景色，代码如下：

void _incrementCounter() async {
  final ui.Image relaImg = await srcImage!.realContentImage(
    ignoreColor: '#FEF151'.color,
    tolerance: 0.4,
    includeIgnoreColor: true,
  );
  changeImage = relaImg;
  setState(() {});
}

显示效果如下:

lm13.png

10. 总结

IImage 现有功能已介绍完毕，有些使用不懂的地方可以留言。一些参数可根据自己的业务进行设置。

1.上方的日志输出是使用 IDKitLog
2. 上方图像加载使用 IDKitImage
3. 上方资源管理使用 Fam

五、总结

IImage 是 IDKit 的其中一个功能模块，它提供了许多方便的图像处理方法，例如：尺寸调整、相对某点的矩形位置、大小调整、图像缩放、背景去除、真实内容尺寸获取以及真实内容图像获取等等。您可以根据自己的业务需求选择最适合自己的方法。如果您对此感到满意，请给我们一个小心心 ❤️ 并留下您的评论。

avatar
文章
阅读
粉丝