这是【Flutter 问题系列第 74 篇】,如果觉得有用的话,欢迎关注专栏。
-
-
- 一:问题描述
- 二:引入,获取依赖
- 三:根据数据类型指定压缩方式
-
- 3-1:Uint8List → Uint8List
- 3-2:File → File
- 3-3:File → Uint8List
- 3-4:Asset → Uint8List
- 解释说明
- 四:完整代码
-
项目中用到了百度 OCR 图像识别的功能,如果上传的图片大于 4 兆的话,就会提示因图片过大识别失败。
所以需要对上传的图像进行压缩,在 Flutter 中如何对图像数据进行压缩呢?
二:引入,获取依赖这里用到了 pub 上的第三方插件库 flutter_image_compress,同时支持在 Android 和 iOS 上运行。截止到发文最新版本是 1.1.0 。
在项目的配置文件pubspec.yaml中引入依赖,如下图所示
然后在终端执行flutter pub get命令获取依赖。
三:根据数据类型指定压缩方式这里我根据官方文档指定的数据类型,封装了四种不同的图像数据转换的方法,
这里自定义一个压缩图片的工具类CompressUtil,并指定其最小分辨率的高度和宽度。
如下代码所示
class CompressUtil { static int minHeight = 1920; // 指定最小分辨率的高度 static int minWidth = 1080; // 指定最小分辨率的宽度 }
然后在当前工具类中,定义了如下四个压缩的方法,简单明了,不需要你对插件有了解,直接拿走使用就行。
3-1:Uint8List → Uint8List第一种压缩方式的参数类型是 Uint8List ,返回值类型是Future,如下代码所示
/// 压缩方式一 Uint8List -> Uint8List static Future<Uint8List> u8ToU8(Uint8List list) async { int quality = imageQuality(list.length); Uint8List result = await FlutterImageCompress.compressWithList( list, minWidth: minWidth, minHeight: minHeight, quality: quality, ); debugPrint("压缩后图片的大小:${size(result.length)}"); return result; }3-2:File → File
第二种压缩方式的参数类型是 File,返回值类型是Future,如下代码所示
/// 压缩方式二 File -> File static Future<File?> fileToFile(File file) async { // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); // 缓存路径 Directory cache = await getTemporaryDirectory(); int time = DateTime.now().millisecondsSinceEpoch; String savePath = cache.path + "/AllenSu_$time.jpg"; // 指定压缩后图片的路径 File? result = await FlutterImageCompress.compressAndGetFile( file.path, savePath, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.readAsBytesSync().length)}"); } return result; }
获取文件路径这里用到了插件 path_provider,需要在pubspec.yaml文件中引入。
压缩后图片的路径你可以修改为自定义的路径。
3-3:File → Uint8List第三种压缩方式的参数类型是 File,返回值类型是Future,如下代码所示
/// 压缩方式三 File -> Uint8List static Future<Uint8List?> fileToU8(File file) async { // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); Uint8List? result = await FlutterImageCompress.compressWithFile( file.path, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.length)}"); } return result; }3-4:Asset → Uint8List
第三种压缩方式的参数类型是 String(其实就是图片的路径 path),返回值类型是Future,如下代码所示
/// 压缩方式四 Asset -> Uint8List static Future<Uint8List?> assetToU8(String assetName) async { File file = File(assetName); // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); Uint8List? result = await FlutterImageCompress.compressAssetImage( assetName, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.length)}"); } return result!; }
以上四种压缩图片的方式满足正常开发是没有问题的。
解释说明代码中的方法imageQuality(int length)和size((int length))是我自己扩展的,原因如下
- 对于方法 imageQuality,是为了根据传入的图片字节长度,返回指定的图片质量。如果你想固定压缩图片的质量,可以不用在意这个方法。
- 对于方法 size,是为了方便查看图片的大小,因为图片的大小是字节数组的长度,看起来不太方便,所以进行了转换,如果图片小于 1 兆,则显示 KB,如果图片大于 1 兆,则显示 MB,并保留一位小数。
我并没有把代码中的注释去掉,因为我觉得你在调试的时候应该可以用得到。
四:完整代码以上是对封装的工具类进行了拆分,对工具类的每个方法进行了解释说明。
但为方便大家复制,最后把完整的代码贴到这里,如下
import 'dart:io'; import 'dart:typed_data'; import 'package:flutter/widgets.dart'; import 'package:flutter_image_compress/flutter_image_compress.dart'; import 'package:path_provider/path_provider.dart'; // ------------------------------------------------------ // author:Allen Su // date :2022/7/9 00:08 // usage :图片压缩工具类 // ------------------------------------------------------ class CompressUtil { static int minHeight = 1920; // 指定最小分辨率的高度 static int minWidth = 1080; // 指定最小分辨率的宽度 /// 压缩方式一 Uint8List -> Uint8List static Future<Uint8List> u8ToU8(Uint8List list) async { int quality = imageQuality(list.length); Uint8List result = await FlutterImageCompress.compressWithList( list, minWidth: minWidth, minHeight: minHeight, quality: quality, ); debugPrint("压缩后图片的大小:${size(result.length)}"); return result; } /// 压缩方式二 File -> File static Future<File?> fileToFile(File file) async { // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); // 缓存路径 Directory cache = await getTemporaryDirectory(); int time = DateTime.now().millisecondsSinceEpoch; String savePath = cache.path + "/AllenSu_$time.jpg"; File? result = await FlutterImageCompress.compressAndGetFile( file.path, savePath, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.readAsBytesSync().length)}"); } return result; } /// 压缩方式三 File -> Uint8List static Future<Uint8List?> fileToU8(File file) async { // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); Uint8List? result = await FlutterImageCompress.compressWithFile( file.path, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.length)}"); } return result; } /// 压缩方式四 Asset -> Uint8List static Future<Uint8List?> assetToU8(String assetName) async { File file = File(assetName); // 图片质量 int quality = imageQuality(file.readAsBytesSync().length); Uint8List? result = await FlutterImageCompress.compressAssetImage( assetName, minWidth: minWidth, minHeight: minHeight, quality: quality, ); if (result != null) { debugPrint("压缩后图片的大小:${size(result.length)}"); } return result!; } /// 根据传入的图片字节长度,返回指定的图片质量 static int imageQuality(int length) { debugPrint("压缩前图片的大小:${size(length)}"); int quality = 100; // 图片质量指数 int m = 1024 * 1024; // 1 兆 if (length < 0.5 * m) { quality = 70; debugPrint("图片小于 0.5 兆,质量设置为 70"); } else if (length >= 0.5 * m && length < 1 * m) { quality = 60; debugPrint("图片大于 0.5 兆小于 1 兆,质量设置为 60"); } else if (length >= 1 * m && length < 2 * m) { quality = 50; debugPrint("图片大于 1 兆小于 2 兆,质量设置为 50"); } else if (length >= 2 * m && length < 3 * m) { quality = 40; debugPrint("图片大于 2 兆小于 3 兆,质量设置为 40"); } else if (length >= 3 * m && length < 4 * m) { quality = 30; debugPrint("图片大于 3 兆小于 4 兆,质量设置为 30"); } else { quality = 20; debugPrint("图片大于 4 兆,质量设置为 20"); } return quality; } /// 根据传入的字节长度,转换成相应的 M 和 KB static String size(int length) { String res = ""; final int unit = 1024; final int m = unit * unit; // 1M // 如果小于 1 兆,显示 KB if (length < 1 * m) { res = (length / unit).toStringAsFixed(0) + " KB"; } // 如果大于 1 兆,显示 MB,并保留一位小数 if (length >= 1 * m) { res = (length / m).toStringAsFixed(1) + " MB"; } return res; } }
经测试,1 张 1.2 兆的图片,如果设置压缩质量为 50,压缩后大概在 50 - 100 kb 之间,图片虽然小了许多,但还是很清晰的,且 OCR 识别成功率几乎是 100 %。
至此,关于如何在 Flutter 中对图像数据进行压缩便介绍到这里。
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
结束语 Google 的 Flutter 越来越火,截止 2022年7月9日 GitHub 标星已达 142K,Flutter 毅然是一种趋势,所以作为前端开发者,没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了,不妨先点个关注,后续我会将 Flutter 中的常用组件(含有源码分析、组件的用法及注意事项)以及可能遇到的问题写到 CSDN 博客中,希望自己学习的同时,也可以帮助更多的人。