Flutter 压缩图像的最佳方式

简介: 引言作为开发者的我们,经常会做一些上传图片和和保存图片啦的功能,但是由于一些图片非常大,我们在上传或者保存的时候会占用大量的网络资源和本地资源,那么我们需要做的就是对图片进行压缩。

引言

作为开发者的我们,经常会做一些上传图片和和保存图片啦的功能,但是由于一些图片非常大,我们在上传或者保存的时候会占用大量的网络资源和本地资源,那么我们需要做的就是对图片进行压缩。


昨天在写如何接入微信分享的时候用到一个知识点,就是图片压缩

当时我用了 flutter_image_compress

可能大家都知道 Dart 已经有图片压缩库了。为什么要使用原生?

还不是因为他的效率问题,

所以今天就和大家来说一说它的具体用法吧。

1.flutter_image_compress

安装

dependencies:
  flutter_image_compress: ^1.0.0-nullsafety

使用的地方导入

import 'package:flutter_image_compress/flutter_image_compress.dart';
  /// 图片压缩 File -> Uint8List
  Future<Uint8List> testCompressFile(File file) async {
    var result = await FlutterImageCompress.compressWithFile(
      file.absolute.path,
      minWidth: 2300,
      minHeight: 1500,
      quality: 94,
      rotate: 90,
    );
    print(file.lengthSync());
    print(result.length);
    return result;
  }
  /// 图片压缩 File -> File
  Future<File> testCompressAndGetFile(File file, String targetPath) async {
    var result = await FlutterImageCompress.compressAndGetFile(
        file.absolute.path, targetPath,
        quality: 88,
        rotate: 180,
      );
    print(file.lengthSync());
    print(result.lengthSync());
    return result;
  }
  /// 图片压缩 Asset -> Uint8List
  Future<Uint8List> testCompressAsset(String assetName) async {
    var list = await FlutterImageCompress.compressAssetImage(
      assetName,
      minHeight: 1920,
      minWidth: 1080,
      quality: 96,
      rotate: 180,
    );
    return list;
  }
  /// 图片压缩 Uint8List -> Uint8List
  Future<Uint8List> testComporessList(Uint8List list) async {
    var result = await FlutterImageCompress.compressWithList(
      list,
      minHeight: 1920,
      minWidth: 1080,
      quality: 96,
      rotate: 135,
    );
    print(list.length);
    print(result.length);
    return result;
  }

还有另外两种方式

2.使用 image_picker 包的 imageQuality 参数

图像选择器

3.使用 flutter_native_image 包

flutter_native_image

安装

flutter_native_image: ^0.0.6


文档地址

https://pub.flutter-io.cn/packages/flutter_native_image

用法

Future<File> compressFile(File file) async{
    File compressedFile = await FlutterNativeImage.compressImage(file.path,
        quality: 5,);
    return compressedFile;
  }


关于如何计算所选文件的图像大小的吗?

您可以以字节为单位获取文件长度,并以千字节或兆字节等计算。

像这样:file.readAsBytesSync().lengthInBytes -> 文件大小以字节为单位的文件大小

(file.readAsBytesSync().lengthInBytes) / 1024 -> 文件大小以千字节为单位的文件大小

(file.readAsBytesSync().lengthInBytes) / 1024 / 1024 -> 文件大小以兆字节为单位


总结

今天的文章介绍了图片压缩的三种用法,分别对应三个不同的库,大家可以去实践,来对比一下那个库的性能更好。

好的,我是坚果,公众号有更多精彩内容,期待你的发现.

相关文章
|
存储 IDE 测试技术
在 Flutter 中构建图像选择器【Flutter 专题 9】
什么是 Flutter 中的image_picker? 在 Flutter 中从头开始编写图片选择器小部件会很乏味。Flutter 带有一个图片选择器插件,用于从设备图库中选择图片或从相机拍摄新照片。
1173 0
在 Flutter 中构建图像选择器【Flutter 专题 9】
|
存储 移动开发 前端开发
flutter系列之:做一个图像滤镜
很多时候,我们需要一些特效功能,比如给图片做个滤镜什么的,如果是h5页面,那么我们可以很容易的通过css滤镜来实现这个功能。 那么如果在flutter中,如果要实现这样的滤镜功能应该怎么处理呢?一起来看看吧。
在带有背景图像的Flutter中拉动以刷新
本文主要介绍在带有背景图像的Flutter中拉动以刷新 拉动刷新”是显示动态数据列表的移动应用程序的常见任务。今天我们将使用 pull_to_refresh 包实现 pull to refresh 并利用 Slivers 创建一个自定义的 Collapsible 标头
383 0
|
存储 缓存
Flutter中更快地加载您的图像资源
本文主要介绍在Flutter中更快地加载您的图像资源 我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 — precacheImage()
237 0
|
Dart
Flutter中GridTile中图像上方的InkVell波纹以及flutter analyse的使用
Flutter中GridTile中图像上方的InkVell波纹 我认为这是在图像上显示波纹效果的更好方法。
147 0
|
Dart 开发者
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
387 0
【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
|
缓存
在Flutter中更快地加载您的图像资源
我们可以将图像放在我们的资产文件夹中,但如何更快地加载它们?这是 Flutter 中的一个秘密函数,可以帮助我们做到这一点 — precacheImage()
285 0
在Flutter中更快地加载您的图像资源
|
容器
如何在 Flutter 中设置背景图像【Flutter 专题 15】
本教程将向您展示如何在 Flutter 中设置背景图像。 在 Flutter 应用程序中设置背景图像的常用方法是使用DecorationImage. 以下示例包括如何设置 Fit 模式、透明度以及在显示键盘时防止图像变化。 设置背景图像使用 DecorationImage 您可能已经熟悉Container小部件。Container 的构造函数有一个名为decoration的参数,用于在 child 后面绘制装饰。对于该参数,您需要传递一个Decoration值。Flutter 中有一些Decoration类。其中一些,例如BoxDecorationand ShapeDecoration,允
1248 0
如何在 Flutter 中设置背景图像【Flutter 专题 15】
|
Android开发 iOS开发
在 Flutter App 中使用相机和图库/照片选取图像
在 Flutter App 中添加图像选取器 — 使用相机和图库/照片选取图像 图像选择器是我们经常需要的用户配置文件和其他内容的常见组件。我们将使用此插件。 步骤 1 — 将依赖项添加到pubspec.yaml文件。
646 0
|
前端开发 JavaScript API
Flutter图像绘制原理深入分析
本文章将讲述 CPU、GPU和显示器 显示图像的协作原理、Vsync 机制、Flutter Vsync 流程
Flutter图像绘制原理深入分析

热门文章

最新文章