我可能会使用 BoxDecoration
和一个 DecorationImage
。你可以使用 alignment
和 fit
属性来确定你的图像如何裁剪。如果你不想在 Container
上硬编码高度,可以使用 AspectRatio
组件。
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new MyHomePage(),
));
}
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Image Crop Example"),
),
body: new Center(
child: new AspectRatio(
aspectRatio: 487 / 451,
child: new Container(
decoration: new BoxDecoration(
image: new DecorationImage(
fit: BoxFit.fitWidth,
alignment: FractionalOffset.topCenter,
image: new NetworkImage('https://istack.dev59.com/lkd0a.webp'),
)
),
),
),
),
);
}
}
为您的Image
小部件提供一个适合的因子,然后将其包装在AspectRatio
中。
AspectRatio(
aspectRatio: 1.5,
child: Image.asset(
'your_image_asset',
fit: BoxFit.cover,
),
)
看看brendan-duncan/image,这是一个用于在Dart中操作图像的平台无关库。
您可以使用以下函数:
Image copyCrop(Image src, int x, int y, int w, int h);
ui.Image
解码后的图像。但是,如果您使用Brendan的图像库进行解码,您可以调用image.getBytes()
并将其传递给new Image.memory
。 - Collin Jackson{ x: 897, y: 235, width: 845, height: 845 }
值处裁剪图片,但找不到适合我的方法。 - Mārtiņš Ciekurs我只使用了这2个属性,就成功运作了:
CachedNetworkImage(
fit: BoxFit.cover,// OR BoxFit.fitWidth
alignment: FractionalOffset.topCenter,
....
)
有一个新的包叫做ImageCropper
。我建议大家使用它,因为它拥有许多功能,使一切变得更加容易。它允许您将图像裁剪到任意或指定的纵横比,并且甚至可以压缩图像。这是该软件包的链接:https://pub.dev/packages/image_cropper
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper/image_cropper.dart';
class MyPage extends StatefulWidget {
@override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
/// Variables
File imageFile;
/// Widget
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0XFF307777),
title: Text("Image Cropper"),
),
body: Container(
child: imageFile == null
? Container(
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Color(0XFF307777),
onPressed: () {
_getFromGallery();
},
child: Text(
"PICK FROM GALLERY",
style: TextStyle(color: Colors.white),
),
),
],
),
)
: Container(
child: Image.file(
imageFile,
fit: BoxFit.cover,
),
)));
}
/// Get from gallery
_getFromGallery() async {
PickedFile pickedFile = await ImagePicker().getImage(
source: ImageSource.gallery,
maxWidth: 1800,
maxHeight: 1800,
);
_cropImage(pickedFile.path);
}
/// Crop Image
_cropImage(filePath) async {
File croppedImage = await ImageCropper.cropImage(
sourcePath: filePath,
maxWidth: 1080,
maxHeight: 1080,
);
if (croppedImage != null) {
imageFile = croppedImage;
setState(() {});
}
}
}
在这里,我将文件裁剪成正方形。
我使用image库。
import 'dart:io';
import 'package:image/image.dart' as img;
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
class CropperService {
static const _side = 1800;
Future<File> cropImageFile(File file, [int? side]) async {
final image = await img.decodeImageFile(file.path);
if (image == null) throw Exception('Unable to decode image');
final croppedImage = img.copyResizeCropSquare(image, size: _side);
final croppedFile = await _convertImageToFile(croppedImage, file.path);
return croppedFile;
}
Future<File> _convertImageToFile(img.Image image, String path) async {
final newPath = await _croppedFilePath(path);
final jpegBytes = img.encodeJpg(image);
final convertedFile = await File(newPath).writeAsBytes(jpegBytes);
await File(path).delete();
return convertedFile;
}
Future<String> _croppedFilePath(String path) async {
final tempDir = await getTemporaryDirectory();
return join(
tempDir.path,
'${basenameWithoutExtension(path)}_compressed.jpg',
);
}
}
从图库中选择图片,我们可以使用Flutter中的image_cropper依赖来裁剪它。
Dependency : image_cropper: ^1.4.1
从相册选择图像时的代码:
Future<void> pickFromGallery() async {
try {
final picker = ImagePicker();
final pickedImage = await picker.pickImage(source: ImageSource.gallery);
if (pickedImage == null) return;
final croppedImage = await ImageCropper().cropImage(
sourcePath: pickedImage.path,
aspectRatioPresets: [
CropAspectRatioPreset.square,
CropAspectRatioPreset.ratio3x2,
CropAspectRatioPreset.original,
CropAspectRatioPreset.ratio4x3,
CropAspectRatioPreset.ratio16x9
],
androidUiSettings: AndroidUiSettings(
toolbarTitle: 'Crop Image',
toolbarColor: Colors.deepOrange,
toolbarWidgetColor: Colors.white,
initAspectRatio: CropAspectRatioPreset.original,
lockAspectRatio: false,
),
iosUiSettings: IOSUiSettings(
title: 'Crop Image',
aspectRatioLockEnabled: false,
),
);
if (croppedImage == null) return;
final croppedFile = File(croppedImage.path);
setState(() {
this.image = croppedFile;
});
print("Image path: ${croppedFile.path}");
} on PlatformException catch (e) {
print("Failed to pick or crop image: $e");
}
}
请确保将活动添加到AndroidManifest.xml文件中。 <activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
200, y=300400)这一部分。因此我不能使用fit+alignment方法。我该怎么做呢?谢谢! - ch271828n