前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 压缩图像的最佳方式【Flutter专题23】

Flutter 压缩图像的最佳方式【Flutter专题23】

作者头像
徐建国
发布2022-03-30 15:22:12
2.3K0
发布2022-03-30 15:22:12
举报
文章被收录于专栏:个人路线个人路线

引言

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

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

当时我用了flutter_image_compress

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

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

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

1.flutter_image_compress

安装

代码语言:javascript
复制
dependencies:
  flutter_image_compress: ^1.0.0-nullsafety

使用的地方导入

代码语言:javascript
复制
import 'package:flutter_image_compress/flutter_image_compress.dart';
代码语言:javascript
复制
  /// 图片压缩 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

安装

代码语言:javascript
复制
flutter_native_image: ^0.0.6

文档地址

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

用法

代码语言:javascript
复制
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 -> 文件大小以兆字节为单位

总结

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-01-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大前端之旅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引言
  • 1.flutter_image_compress
  • 2.使用 image_picker 包的 imageQuality 参数
  • 3.使用 flutter_native_image 包
  • 关于如何计算所选文件的图像大小的吗?
  • 总结
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档