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

[》跳过拾光记忆]

拾光记忆

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

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

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

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

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

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

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

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

[返回拾光记忆《]

一、简述

在 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 提供的方法

四、 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;
}

原始图片展示如下:

1. 获取大小

void _incrementCounter() {
  IDKitLog.value(srcImage.size);
}

获取结果如下:

2. 获取以 (0,0) 为顶点的矩形

void _incrementCounter() {
  IDKitLog.value(srcImage.rect());
}

获取结果如下:

3. 获取图像的 Uint8List

void _incrementCounter() {
  srcImage.uint8List().then((value) {
    IDKitLog.value(value);
  });
}

输出结果如下：(部分)

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

4. 获取图像的 Uint32List

void _incrementCounter() {
  srcImage.uint32List().then((value) {
    IDKitLog.value(value);
  });
}

输出结果如下：(部分)

还支持各种格式的图像的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);
}

输出结果,如下:

图像显示如下:

6. 进行图像的缩放

void _incrementCounter() async {
  final ui.Image scaleImage = await srcImage!.scale(scale: 0.6);
  changeImage = scaleImage;
  IDKitLog.value(changeImage);
  setState(() {});
}

输出结果如下:

图像的显示如下:

7. 移除图像某个颜色

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

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

显示效果如下:

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

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

显示效果如下:

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

8. 获取图像真实内容的大小

void _incrementCounter() async {
  final Rect rect = await srcImage!.realContentSize(ignoreColor: '#FEF151'.color, tolerance: 0.4);
  IDKitLog.value(rect);
  setState(() {});
}

输出结果如下:

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

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

  

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

  

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

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

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

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

显示效果如下:

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

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

显示效果如下:

10. 总结

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

五、总结

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