Flutter相机视图遮罩插件mask_for_camera_view的使用

Flutter相机视图遮罩插件mask_for_camera_view的使用

插件介绍

mask_for_camera_view 是一个用于从相机裁剪图片的Flutter插件。它允许用户在拍照时通过指定的边界框来裁剪照片的一部分。

示例代码

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

late List<CameraDescription> cameras;

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Camera View with Mask'),
      ),
      body: Center(
        child: MaskForCameraView(
          visiblePopButton: false,
          // [cameras.first] is rear camera.
          cameraDescription: cameras.first,
          onTake: (MaskForCameraViewResult? res) {
            if (res != null) {
              // 处理裁剪后的图片
              print(res.croppedImage);
            }
          },
        ),
      ),
    );
  }
}

使用说明

1. 初始化相机

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

2. 获取图像 Uint8List

   MaskForCameraView(
     visiblePopButton: false,
     // [cameras.first] is rear camera.
     cameraDescription: cameras.first,
     onTake: (MaskForCameraViewResult? res) {
       // res.croppedImage is cropped image, you can use it.
     }
   );
   

3. 可接受的参数示例

   MaskForCameraView(
     title: "Crop image from camera",
     boxWidth: 300.0,
     boxHeight: 168.0,
     boxBorderWidth: 1.8,
     boxBorderRadius: 3.2,
     // [cameras.first] is rear camera.
     cameraDescription: cameras.first,
     onTake: (MaskForCameraViewResult? res) {},
     insideLine: MaskForCameraViewInsideLine(
       position: MaskForCameraViewInsideLinePosition.endPartThree,
       direction: MaskForCameraViewInsideLineDirection.horizontal,
     ),
     borderType: MaskForCameraViewBorderType.dotted,
     visiblePopButton: true,
     appBarColor: Colors.black,
     titleStyle: const TextStyle(
       color: Colors.white,
       fontSize: 18.0,
       fontWeight: FontWeight.w6600,
     ),
     boxBorderColor: Colors.white,
     bottomBarColor: Colors.black,
     takeButtonColor: Colors.white,
     takeButtonActionColor: Colors.black,
     iconsColor: Colors.white,
   )
   

4. Android和iOS使用注意事项

   • Android:

     minSdkVersion 21
     

   • iOS:

     ios 9
     to
     ios 10
     

5. 完整示例

   import 'dart:typed_data';
   import 'package:flutter/material.dart';
   import 'package:mask_for_camera_view/mask_for_camera_view.dart';
   
   late List<CameraDescription> cameras;
   
   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     cameras = await MaskForCameraView.initialize();
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: HomePage(),
       );
     }
   }
   
   class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Camera View with Mask'),
         ),
         body: Center(
           child: MaskForCameraView(
             visiblePopButton: false,
             // [cameras.first] is rear camera.
             cameraDescription: cameras.first,
             onTake: (MaskForCameraViewResult? res) {
               if (res != null) {
                 // 处理裁剪后的图片
                 print(res.croppedImage);
               }
             },
           ),
         ),
       );
     }
   }