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

[》越过拾光回忆]

拾光回忆

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

原始图片展示如下:

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 现有功用已介绍结束，有些运用不懂的地方能够留言。一些参数可依据自己的事务进行设置。

1.上方的日志输出是运用 IDKitLog
2. 上方图画加载运用 IDKitImage
3. 上方资源办理运用 Fam

五、总结

IImage 是 IDKit 的其间一个功用模块，它供给了许多便利的图画处理办法，例如：尺度调整、相对某点的矩形方位、巨细调整、图画缩放、布景去除、实在内容尺度获取以及实在内容图画获取等等。您能够依据自己的事务需求挑选最适合自己的办法。如果您对此感到满意，请给咱们一个小心心 ❤️ 并留下您的评论。