flutter开发实战-图片缩放裁剪框图片裁剪功能
在Flutter中,我们可以使用image_picker
插件来选择图片,使用image
包来处理图片,并使用flutter_image_compress
来压缩图片。以下是一个简化的例子,展示了如何在Flutter中实现图片的缩放和裁剪功能:
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart';
class ImageCropperPage extends StatefulWidget {
@override
_ImageCropperPageState createState() => _ImageCropperPageState();
}
class _ImageCropperPageState extends State<ImageCropperPage> {
File _imageFile;
Future<void> _cropImage() async {
File croppedFile = await ImageCropper.cropImage(
sourcePath: _imageFile.path,
compressQuality: 10, // 图片压缩质量
maxWidth: 1000, // 最大宽度
maxHeight: 1000, // 最大高度
aspectRatio: CropAspectRatio(ratio: 1 / 1), // 裁剪比例
);
setState(() {
_imageFile = croppedFile;
});
}
Future<void> _pickImage() async {
final ImagePicker picker = ImagePicker();
final PickedFile imageFile = await picker.getImage(source: ImageSource.gallery);
if (imageFile != null) {
setState(() {
_imageFile = File(imageFile.path);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('图片裁剪'),
),
body: Center(
child: _imageFile != null ? Image.file(_imageFile) : Text('未选择图片'),
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: _pickImage,
tooltip: 'Pick Image',
child: Icon(Icons.add_a_photo),
),
SizedBox(height: 10.0),
FloatingActionButton(
onPressed: _imageFile != null ? _cropImage : null,
tooltip: 'Crop Image',
child: Icon(Icons.crop),
),
],
),
);
}
}
在这个例子中,我们首先使用ImagePicker
来选择图片,然后使用ImageCropper
来裁剪图片。裁剪后的图片可以进一步进行压缩,以减少文件大小。这个例子提供了一个简单的用户界面,用户可以通过点击两个浮动按钮来选择图片和裁剪图片。裁剪后的图片会显示在屏幕中央。
评论已关闭