Flutter自定义比例相机插件custom_ratio_camera的使用

当然，以下是如何在Flutter项目中集成和使用一个自定义比例相机插件 custom_ratio_camera 的示例代码。需要注意的是，这个插件 custom_ratio_camera 是假设存在的，实际中你可能需要寻找一个类似功能的插件或者自己实现这样的功能。如果找不到现成的插件，代码将展示如何从头开始实现类似功能。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加假设的 custom_ratio_camera 依赖（如果实际存在的话）。如果不存在，则你可以使用 camera 插件作为基础，并添加自定义比例的功能。

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.0+1  # 使用官方camera插件作为基础
  # custom_ratio_camera: ^x.y.z  # 如果实际存在，取消注释并添加版本号

2. 配置权限

在 AndroidManifest.xml 和 Info.plist 中添加必要的相机和麦克风权限。

AndroidManifest.xml

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />

Info.plist

<key>NSCameraUsageDescription</key>
<string>Need camera access</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access</string>

3. 实现自定义比例相机功能

如果 custom_ratio_camera 插件不存在，你可以使用 camera 插件并添加自定义比例的逻辑。以下是一个示例，展示如何实现自定义比例拍照：

main.dart

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';

List<CameraDescription> cameras;
CameraController? controller;
final ValueNotifier<double> aspectRatioNotifier = ValueNotifier(16 / 9);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CameraApp(),
    );
  }
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  String? imagePath;

  @override
  void initState() {
    super.initState();
    cameras = availableCameras();
    controller = new CameraController(cameras![0], ResolutionPreset.high);
    controller!.initialize().then((_) {
      if (!mounted) return;
      setState(() {});
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  void takePicture() async {
    if (!controller!.value.isInitialized) return;
    final CameraImage image = await controller!.takePicture();
    List<int> bytes = image.planes[0].bytes;
    final Size size = Size(image.width, image.height);

    // Convert the image to a file
    final path = join(getTemporaryDirectory().path, '${DateTime.now()}.jpg');
    final file = File(path);
    await file.writeAsBytes(bytes);

    // Resize the image to the custom aspect ratio
    final double aspectRatio = aspectRatioNotifier.value;
    final double targetWidth = size.width;
    final double targetHeight = size.width / aspectRatio; // Example: maintaining width, scaling height
    final Uint8List resizedImageBytes = await resizeImage(file.path, targetWidth.toInt(), targetHeight.toInt());

    // Save the resized image
    final resizedPath = join(getTemporaryDirectory().path, '${DateTime.now()}_resized.jpg');
    final resizedFile = File(resizedPath);
    await resizedFile.writeAsBytes(resizedImageBytes);

    setState(() {
      imagePath = resizedPath;
    });
  }

  Future<Uint8List> resizeImage(String path, int width, int height) async {
    final ImageProvider image = FileImage(File(path));
    final img = await decodeImageFromList(await image.readAsBytes());
    final resizedImg = Resize.resize(width, height, img);
    final Uint8List result = Uint8List.fromList(encodeJpg(resizedImg, quality: 100));
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Camera App'),
      ),
      body: controller!.value.isInitialized
          ? AspectRatioOverlay(
              aspectRatio: aspectRatioNotifier.value,
              child: CameraPreview(controller!))
          : Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: takePicture,
        tooltip: 'Capture Picture',
        child: const Icon(Icons.camera),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.aspect_ratio),
              onPressed: () {
                setState(() {
                  aspectRatioNotifier.value = 4 / 3; // Change to custom aspect ratio
                });
              },
            ),
            // Add more buttons for different aspect ratios if needed
          ],
        ),
      ),
    );
  }
}

class AspectRatioOverlay extends StatelessWidget {
  final double aspectRatio;
  final Widget child;

  AspectRatioOverlay({required this.aspectRatio, required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final double width = constraints.maxWidth;
        final double height = width / aspectRatio;
        return FittedBox(
          fit: BoxFit.cover,
          child: Container(
            width: width,
            height: height,
            color: Colors.transparent,
            child: child,
          ),
        );
      },
    );
  }
}

4. 依赖项

上面的代码示例中使用了 camera 插件和 image 包来处理图像。你需要在 pubspec.yaml 中添加这些依赖项：

dependencies:
  flutter:
    sdk: flutter
  camera: ^0.10.0+1
  image: ^3.0.2  # 用于图像处理

5. 注意事项

• 上述代码中的 resizeImage 函数使用了简单的图像解码和编码过程，可能需要根据实际情况进行优化，比如使用更高效的图像处理库。
• 上述代码仅作为示例，实际项目中可能需要处理更多的细节，比如错误处理、UI优化等。

希望这个示例能够帮助你实现自定义比例相机功能！如果你找到一个现成的 custom_ratio_camera 插件，你可以直接使用它，并根据其文档进行集成。