Flutter图片压缩插件flutter_luban的使用
Flutter图片压缩插件flutter_luban的使用
flutter_luban简介
flutter_luban
是一个类似于 Luban 的图像压缩包,基于 image 库。这个库没有系统平台限制。
使用示例
下面是一个完整的Flutter Demo来演示如何使用 flutter_luban
来进行图片压缩。
1. 添加依赖
首先,在你的 pubspec.yaml
文件中添加 flutter_luban
依赖:
dependencies:
flutter:
sdk: flutter
flutter_luban: ^最新版本号
然后运行 flutter pub get
更新依赖。
2. 完整示例代码
接下来是完整的示例代码,展示了如何选择图片并使用 flutter_luban
进行压缩:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_luban/flutter_luban.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ImageCompressPage(),
);
}
}
class ImageCompressPage extends StatefulWidget {
@override
_ImageCompressPageState createState() => _ImageCompressPageState();
}
class _ImageCompressPageState extends State<ImageCompressPage> {
File? _imageFile;
String? _compressedImagePath;
final picker = ImagePicker();
Future<void> _pickImage() async {
final pickedFile = await picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {
setState(() {
_imageFile = File(pickedFile.path);
});
}
}
Future<void> _compressImage() async {
if (_imageFile == null) return;
Directory tempDir = await getTemporaryDirectory();
CompressObject compressObject = CompressObject(
imageFile: _imageFile!,
path: tempDir.path, // 压缩后保存的路径
quality: 85, // 首次压缩质量,默认80
step: 9, // 压缩质量步长,越大越快,越小越准确,默认6
mode: CompressMode.LARGE2SMALL, // 默认AUTO
);
String? compressedPath = await Luban.compressImage(compressObject);
setState(() {
_compressedImagePath = compressedPath;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Luban Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _pickImage,
child: Text('Pick Image'),
),
SizedBox(height: 20),
_imageFile != null
? Image.file(_imageFile!)
: Text('No image selected.'),
SizedBox(height: 20),
ElevatedButton(
onPressed: _compressImage,
child: Text('Compress Image'),
),
SizedBox(height: 20),
_compressedImagePath != null
? Image.file(File(_compressedImagePath!))
: Container(),
],
),
),
);
}
}
3. 运行效果
该应用允许用户从图库中选择一张图片,然后点击“Compress Image”按钮对图片进行压缩,并显示压缩后的图片。
通过这个简单的例子,你可以看到 flutter_luban
插件在Flutter项目中的使用方法。希望这对你有所帮助!
如果你有任何问题或需要进一步的帮助,请随时提问!
更多关于Flutter图片压缩插件flutter_luban的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter图片压缩插件flutter_luban的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用flutter_luban
插件进行图片压缩的示例代码。flutter_luban
是一个基于luban算法的图片压缩库,可以在不显著降低图片质量的情况下减少图片的大小。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加flutter_luban
依赖:
dependencies:
flutter:
sdk: flutter
flutter_luban: ^0.1.3 # 请确保使用最新版本,版本号可能有所变化
然后运行flutter pub get
来安装依赖。
2. 导入包
在你的Dart文件中导入flutter_luban
包:
import 'package:flutter_luban/flutter_luban.dart';
3. 选择图片并压缩
以下是一个完整的示例,展示如何选择一个图片文件,然后使用flutter_luban
进行压缩:
import 'package:flutter/material.dart';
import 'package:flutter_luban/flutter_luban.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ImageCompressionScreen(),
);
}
}
class ImageCompressionScreen extends StatefulWidget {
@override
_ImageCompressionScreenState createState() => _ImageCompressionScreenState();
}
class _ImageCompressionScreenState extends State<ImageCompressionScreen> {
File? originalImage;
File? compressedImage;
final ImagePicker _picker = ImagePicker();
Future<void> pickImage() async {
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
if (image != null) {
final File originalFile = File((await image.path)!);
setState(() {
originalImage = originalFile;
});
compressImage(originalFile);
}
}
Future<void> compressImage(File originalFile) async {
try {
final List<File> result = await FlutterLuban.compressImage(
files: [originalFile.path],
quality: 60, // 质量参数,范围0-100,默认80
);
if (result.isNotEmpty) {
setState(() {
compressedImage = result.first;
});
}
} catch (e) {
print('压缩图片失败: $e');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('图片压缩示例'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
originalImage != null
? Image.file(originalImage!, width: 300, height: 300)
: Text('请选择图片'),
SizedBox(height: 20),
compressedImage != null
? Image.file(compressedImage!, width: 300, height: 300)
: Text('压缩后的图片将显示在这里'),
SizedBox(height: 20),
ElevatedButton(
onPressed: pickImage,
child: Text('选择图片'),
),
],
),
),
);
}
}
4. 注意事项
-
权限管理:确保在Android和iOS上请求了存储权限。对于Android,你可能需要在
AndroidManifest.xml
中添加相关权限,并在运行时请求权限。对于iOS,你需要在Info.plist
中添加NSPhotoLibraryUsageDescription和NSPhotoLibraryAddUsageDescription。 -
ImagePicker:上面的示例使用了
image_picker
插件来选择图片。如果你还没有添加这个依赖,请在pubspec.yaml
中添加它,并运行flutter pub get
。 -
错误处理:在实际应用中,你可能需要更详细的错误处理逻辑,比如处理用户取消选择图片的情况,或处理文件读写错误等。
希望这个示例能帮助你理解如何在Flutter项目中使用flutter_luban
进行图片压缩。