Flutter新手求助：如何实现自定义图片裁剪器？

核心思路 #

利用InteractiveViewer的TransformationController获取图片的缩放、平移参数，结合裁剪容器的尺寸，计算出图片需要裁剪的区域，再通过image库完成实际的像素级裁剪。

步骤实现 #

1. 添加依赖
   在pubspec.yaml中添加图片处理依赖：

dependencies:
  flutter:
    sdk: flutter
  image: ^4.0.17 # 用于图片裁剪处理

2. 完善状态与UI
   修改你的State类，补充必要的状态变量和裁剪逻辑：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as img;

class ImageCropperPage extends StatefulWidget {
  const ImageCropperPage({super.key});

  @override
  State<ImageCropperPage> createState() => _ImageCropperPageState();
}

class _ImageCropperPageState extends State<ImageCropperPage> {
  File? image;
  final transformationController = TransformationController();
  // 裁剪容器的固定尺寸
  final cropContainerSize = const Size(350, 250);

  // 执行裁剪的方法
  Future<void> cropImage() async {
    if (image == null) return;

    // 获取InteractiveViewer的变换矩阵
    final matrix = transformationController.value;
    // 读取原始图片
    final imageFile = await img.decodeImageFile(image!.path);
    if (imageFile == null) return;
    final originalSize = Size(imageFile.width.toDouble(), imageFile.height.toDouble());

    // 计算图片缩放比例
    final scale = matrix.getMaxScaleOnAxis();
    // 计算平移偏移量（修正中心对齐的偏移）
    final offset = Offset(
      -matrix.getTranslation().dx / scale,
      -matrix.getTranslation().dy / scale,
    );

    // 转换为原始图片像素的裁剪区域
    final cropX = (offset.dx * originalSize.width / cropContainerSize.width).clamp(0, originalSize.width - cropContainerSize.width / scale);
    final cropY = (offset.dy * originalSize.height / cropContainerSize.height).clamp(0, originalSize.height - cropContainerSize.height / scale);
    final cropWidth = (cropContainerSize.width / scale).clamp(0, originalSize.width - cropX);
    final cropHeight = (cropContainerSize.height / scale).clamp(0, originalSize.height - cropY);

    // 执行裁剪
    final croppedImage = img.copyCrop(
      imageFile,
      x: cropX.toInt(),
      y: cropY.toInt(),
      width: cropWidth.toInt(),
      height: cropHeight.toInt(),
    );

    // 保存裁剪后的图片
    final croppedFile = File('${image!.parent.path}/cropped_${image!.name}')
      ..writeAsBytesSync(img.encodePng(croppedImage));

    // 更新UI展示裁剪结果
    setState(() {
      image = croppedFile;
      transformationController.value = Matrix4.identity();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: cropContainerSize.height,
              width: cropContainerSize.width,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.red, width: 2), // 显示裁剪框边界
              ),
              child: image != null
                  ? InteractiveViewer(
                      transformationController: transformationController,
                      boundaryMargin: EdgeInsets.all(double.infinity),
                      minScale: 0.1,
                      maxScale: 5.0,
                      child: Image.file(
                        image!,
                        fit: BoxFit.contain, // 避免图片拉伸失真
                      ),
                    )
                  : const SizedBox(
                      width: 350,
                      height: 250,
                      child: Center(child: Text('请选择图片')),
                    ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: cropImage,
              child: const Text('执行裁剪'),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 给裁剪容器添加红色边框，直观显示裁剪范围
• 将Image的fit改为BoxFit.contain，避免图片拉伸导致裁剪比例失真
• 通过变换矩阵计算，把InteractiveViewer的可视化操作转换为原始图片的像素裁剪区域
• 裁剪后的图片会保存在原图片同目录下，命名格式为cropped_原文件名

内容的提问来源于stack exchange，提问作者Mark John