相机视图遮罩

从相机中裁剪图片一部分的插件。

入门

此插件适用于 Android 和 iOS。
用于裁剪相机区域的图像。无需任何麻烦，只需使用 BoxInCamera 类即可通过其 onTake(Uint8List) 函数获取图片。

示例应用

example app

如何使用虚线边框

example app

MaskForCameraView(
  visiblePopButton: false,
  onTake: (Uint8List imageBytes) {
    // imageBytes is croped image, you can use it.
  }
);

如何使用实线边框

example app

MaskForCameraView(
  visiblePopButton: false,
  appBarColor: Colors.red,
  bottomBarColor: Colors.red,
  takeButtonActionColor: Colors.red,
  borderType: MaskForCameraViewBorderType.solid,
  boxBorderWidth: 3.8,
  boxBorderRadius: 3.2,
  onTake: (Uint8List imageBytes) {
    // imageBytes is croped image, you can use it.
  }
);

如何使用 Navigator.pop() 按钮

example app

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: (Uint8List imageBytes) {
    // imageBytes is croped image, you can use it.
  }
);

创建您自己的样式

example app

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: (Uint8List imageBytes) {
    // imageBytes is croped image, you can use it.
  }
);

Android 中的用法

在 android/app/build.gradle 文件中，更改

minSdkVersion 16

to

minSdkVersion 21

在 android/app/src/main/AndroidManifest.xml 文件中，添加此内容

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

iOS 中的用法

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

获取图像 Uint8List

MaskForCameraView(
  visiblePopButton: false,
  onTake: (Uint8List imageBytes) {
    // imageBytes is croped image, you can use it.
});

可接受的参数

MaskForCameraView(
    title: "Crop image from camera",
    boxWidth: 300.0,
    boxHeight: 168.0,
    boxBorderWidth: 1.8,
    boxBorderRadius: 3.2,
    onTake: (Uint8List imageBytes) {},
    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:async';
import 'dart:typed_data';

import 'package:flutter/material.dart';
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
  _MyAppState createState() => _MyAppState();
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaskForCameraView(
      visiblePopButton: false,
      onTake: (Uint8List imageBytes) {
        // imageBytes is croped image, you can use it.
      }
    );
  }
}

GitHub

查看 Github