Question

我们说我有一张长方形的肖像照片：

我想裁剪它，使它像这样呈现：

我怎么能在Flutter中做到这一点？

（我不需要调整图片大小。）

Answer 1

我可能会使用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://i.stack.imgur.com/lkd0a.png'),
              )
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

您也可以直接将Image课程与BoxFit一起使用，并执行以下操作：

new Image.asset(
  stringToImageLocation,
  fit: BoxFit.cover,
)

Answer 3

查看brendan-duncan/image这个与平台无关的库来操纵Dart中的图像。

您可以使用以下功能：

<div class="text--error" *ngIf="addState?.errors && addState?.touched">
    <span *ngIf="addState?.errors.required">State is required.</span>
</div>

Answer 4

问题并非完全如此，但是当我尝试为用户提供裁剪界面时，它是从Google那里获得的。

image_cropper插件帮助了我。

Answer 5

有一个名为ImageCropper的新软件包。我建议每个人都使用它，因为它具有许多功能并使一切变得更容易。它使您可以将图像裁剪为所需的任何或指定的宽高比，甚至可以压缩图像。这是该软件包的链接：https://pub.dev/packages/image_cropper

Answer 6

为您的 fit 小部件提供一个 Image 因子，然后将其包装在 AspectRatio 中。

AspectRatio(
  aspectRatio: 1.5, 
  child: Image.asset(
    'your_image_asset',
    fit: BoxFit.cover,
  ),
)

Answer 7

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(() {});
    }
  }
}

如何在Flutter中裁剪图像？

7 个答案: