Flutter相机遮罩插件mask_for_camera_h的使用

插件简介

此插件用于从相机视图中裁剪出图像的一部分。该插件支持Android和iOS平台，并且已经更新以兼容image 4.0.17包。

开始使用

示例效果

基本用法

使用虚线边框

MaskForCameraView(
  visiblePopButton: false, // 是否显示返回按钮
  onTake: (MaskForCameraViewResult res) {
    // res.croppedImage 是裁剪后的图像，您可以使用它。
  }
);

使用实线边框

MaskForCameraView(
  visiblePopButton: false,
  appBarColor: Colors.red, // 应用栏颜色
  bottomBarColor: Colors.red, // 底部栏颜色
  takeButtonActionColor: Colors.red, // 拍照按钮颜色
  borderType: MaskForCameraViewBorderType.solid, // 边框类型为实线
  boxBorderWidth: 3.8, // 边框宽度
  boxBorderRadius: 3.2, // 边框圆角
  onTake: (MaskForCameraViewResult res) {
    // res.croppedImage 是裁剪后的图像，您可以使用它。
  }
);

使用返回按钮

MaskForCameraView(
  visiblePopButton: true, // 显示返回按钮
  appBarColor: Colors.white, // 应用栏颜色
  bottomBarColor: Colors.white, // 底部栏颜色
  takeButtonActionColor: Colors.white, // 拍照按钮颜色
  takeButtonColor: Colors.black, // 拍照按钮背景颜色
  boxBorderColor: Colors.red, // 裁剪框边框颜色
  iconsColor: Colors.black, // 图标颜色
  titleStyle: const TextStyle(
    color: Colors.black,
    fontSize: 18.0,
    fontWeight: FontWeight.w800,
  ), // 标题样式
  boxBorderWidth: 2.8, // 边框宽度
  onTake: (MaskForCameraViewResult res) {
    // res.croppedImage 是裁剪后的图像，您可以使用它。
  }
);

自定义样式

MaskForCameraView(
  visiblePopButton: false,
  appBarColor: Colors.yellow, // 应用栏颜色
  bottomBarColor: Colors.yellow, // 底部栏颜色
  takeButtonActionColor: Colors.green, // 拍照按钮颜色
  takeButtonColor: Colors.white, // 拍照按钮背景颜色
  boxBorderColor: Colors.green, // 裁剪框边框颜色
  iconsColor: Colors.white, // 图标颜色
  titleStyle: const TextStyle(
    color: Colors.white,
    fontSize: 18.0,
    fontWeight: FontWeight.w800,
  ), // 标题样式
  boxBorderWidth: 3.8, // 边框宽度
  onTake: (MaskForCameraViewResult res) {
    // res.croppedImage 是裁剪后的图像，您可以使用它。
  }
);

在Android上的使用

在android/app/build.gradle文件中，将以下内容：

minSdkVersion 16

修改为：

minSdkVersion 21

在android/app/src/main/AndroidManifest.xml文件中，添加以下权限：

<uses-permission android:name="android.permission.CAMERA" />

在iOS上的使用

将iOS版本从9升级到10。

在ios/Runner/Info.plist文件中，添加以下键值对：

<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>

自定义裁剪功能

如果需要手动裁剪图像，可以使用以下函数：

cropImage(
    File("...").path,
    cropHeight,
    cropWidth,
    screenHeight,
    screenWidth,
  );

此函数仅从图像中心裁剪。

初始化相机

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MaskForCameraView.initialize();
  runApp(const MyApp());
}

获取裁剪后的图像

MaskForCameraView(
  visiblePopButton: false,
  onTake: (MaskForCameraViewResult res) {
    // res.croppedImage 是裁剪后的图像，您可以使用它。
  }
);

可接受的参数

MaskForCameraView(
    title: "Crop image from camera", // 标题
    boxWidth: 300.0, // 裁剪框宽度
    boxHeight: 168.0, // 裁剪框高度
    boxBorderWidth: 1.8, // 裁剪框边框宽度
    boxBorderRadius: 3.2, // 裁剪框边框圆角
    onTake: (MaskForCameraViewResult res) {}, // 回调函数
    insideLine: MaskForCameraViewInsideLine(
      position: MaskForCameraViewInsideLinePosition.eenter, // 内部线条位置
      direction: MaskForCameraViewInsideLineDirection.horizontal, // 内部线条方向
    ),
    cameraDescription: MaskForCameraViewCameraDescription.rear, // 相机描述
    borderType: MaskForCameraViewBorderType.dotted, // 边框类型
    visiblePopButton: true, // 是否显示返回按钮
    appBarColor: Colors.black, // 应用栏颜色
    titleStyle: const TextStyle(
      color: Colors.white,
      fontSize: 18.0,
      fontWeight: FontWeight.w600,
    ), // 标题样式
    boxBorderColor: Colors.white, // 裁剪框边框颜色
    bottomBarColor: Colors.black, // 底部栏颜色
    takeButtonColor: Colors.white, // 拍照按钮颜色
    takeButtonActionColor: Colors.black, // 拍照按钮动作颜色
    iconsColor: Colors.white, // 图标颜色
)

完整示例

以下是完整的示例代码：

import 'dart:typed_data';
import 'package:mask_for_camera_view/mask_for_camera_view.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MaskForCameraView.initialize();
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaskForCameraView(
      visiblePopButton: false,
      onTake: (MaskForCameraViewResult res) {
        // res.croppedImage 是裁剪后的图像，您可以使用它。
      }
    );
  }
}