flutter 相机加入mask（遮罩层）

偏执的太偏执、 2021-08-28 16:27 1194阅读 0赞

实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]  
实现的效果如上图，这里我们可以在中间加入一个遮罩层，中间的那个人的头像。

使用的插件也是目前第一次遇到过的，先放上地址：

pub地址：`https://pub.dev/packages/camera_camera`

更多文章查看个人主页：  
[Github搭建个人博客（2019最新版,亲测）][Github_2019]

使用步骤：

1 导入：

2 android 清单文件中配置：

app/build.gradler下：

minSdkVersion 21

3 IOS info.plist文件配置：

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

文件中使用：

var  img = await Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => Camera(
                      orientationEnablePhoto: CameraOrientation.portrait,
                      imageMask: Image.asset(ImageUtil.getLocalPath(ImageConstant.icon_mask),
                      ),
                    )),
          );

在调用相册的时候最好使用一下权限声明：

void chosePhoto(int index) async { 
        PermissionHandler().requestPermissions(
            [PermissionGroup.photos, PermissionGroup.camera]).then((map) { 
          if (map[PermissionGroup.photos] == PermissionStatus.granted ||
              map[PermissionGroup.camera] == PermissionStatus.granted) { 
            chosePhotoFromPhone(context, index);
          }
        });
      }

这样我们就完成了整个相册mask（遮罩层）的功能。  
更多文章查看个人主页：  
[Github搭建个人博客（2019最新版,亲测）][Github_2019]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZGFpbG9uZ19ibG9n_size_16_color_FFFFFF_t_70]: /images/20210529/aa44b141cda448f49a6049160341fe7c.png
[Github_2019]: https://blog.csdn.net/xudailong_blog/article/details/78762262