Flutter 中文文档：使用 Camera 插件实现拍照功能

最新推荐文章于 2024-08-20 08:47:07 发布
最新推荐文章于 2024-08-20 08:47:07 发布
阅读量1.6w 收藏 13
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flutterdevs/article/details/101048689
版权
本文档介绍了如何使用 Flutter 的 Camera 插件实现拍照功能。首先，需要添加相关依赖，如 camera、path_provider 和 image_picker。接着，获取设备上的可用相机列表。在 StatefulWidget 的 initState 方法中初始化相机控制器，并在 dispose 方法中销毁。教程详细阐述了从初始化相机到拍摄并保存图片的步骤。
摘要由CSDN通过智能技术生成

640?wx_fmt=jpeg

很多应用都需要使用到设备的相机模块拍摄图片和视频。因此，Flutter 提供了 camera 插件。camera 插件提供了一系列可用的相机，并使用特定的相机展示相机预览、拍照、录视频。

这个章节将会讲解如何使用 camera 插件去展示相机预览、拍照并显示。

步骤

1. 添加所需依赖
2. 获取可用相机列表
3. 创建并初始化  CameraController
4. 使用  CameraPreview  展示相机的帧流
5. 使用  CameraController  拍摄一张图片
6. 使用  Image  组件展示图片

1. 添加所需依赖

为了完成这个章节，你需要向你的应用添加三个依赖：

  • camera - 提供使用设备相机模块的工具

  • path_provider - 寻找存储图片的正确路径

  • path - 创建适配任何平台的路径

dependencies:
  flutter:
    sdk: flutter
  camera:
  path_provider:
  path:

2. 获取可用相机列表

接着，你可以使用 camera 插件获取可用相机列表。

 
 
 
 
 
  3. 创建并初始化 CameraController 
 
 
 
 
 

   在选择了一个相机后，你需要创建并初始化  
  CameraController 。 在这个过程中，与设备相机建立了连接并允许你控制相机并展示相机的预览帧流。 
 
 
 

   实现这个过程，请依照以下步骤： 
 
 
 
（1）创建一个带有 State 类的 StatefulWidget 组件
 
 
（2）添加一个变量到 State 类来存放 CameraController
 
 
&#x



                

        

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  FlutterDevs
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
flutter 人脸检测_在 Flutter 中实现实时图像检测

				
			

			

				

					weixin_39760721的博客
				

				

					12-21
					
					1965
					
				

			

		

		

			
				
最近 Flutter 的官方插件 camera 加入了获取图像流的功能，利用该功能我们可以获取到相机预览的实时画面。我用 camera 和 tflite 插件做了一个结合 TensorFlow Lite 的 Flutter 实时图像识别的 demo。以下是在 iPad 上的演示视频：使用 camera 插件的图像流功能：首先按照 camera 插件 的文档在项目中加入相机功能。然后调用 camer...

			
		

	



                

              
                



	

		

			

				
					
flutter-照相机的使用

				
			

			

				

					zhakesipailuo的博客
				

				

					07-16
					
					4017
					
				

			

		

		

			
				
本文介绍如何在flutter中使用照相机；
1 加入必要的plugin在.yaml文件中：
camera:

2 在main函数中执行获取到可用的camera，并将camera数据传递到指定界面待使用；
import 'package:camera/camera.dart';
List<CameraDescription> cameras;
Future main() async{
	...

			
		

	



                


  
              

                


	

		

			

				
					
Flutter Better Camera 开源项目教程

					
最新发布

				
			

			

				

					gitblog_00365的博客
				

				

					08-20
					
					297
					
				

			

		

		

			
				
Flutter Better Camera 开源项目教程
 flutter_better_camera项目地址:https://gitcode.com/gh_mirrors/fl/flutter_better_camera 本教程将引导您了解并使用 Flutter Better Camera 这一强大的插件，它允许在Flutter应用中访问并控制iOS和Android设备上的摄像头功能。我们将细致...

			
		

	





	

		

			

				
					
Camera插件用法

				
			

			

				

					zygygiug的博客
				

				

					04-20
					
					673
					
				

			

		

		

			
				
第一步：把该插件所需css和js引用

Css





js





第二步：写个类名为camera_wrap id名为camera_wrap_1的div





第三步：在camera_wrap类名的div中写几个div，并通过data-src，把图片链接写上





第四部：通过jquery实现我们效果





效果：





除了这些我们还可以通过一些属性来改变一些效果

首先是图片上的参数:

data-src: 图片路径
	data-link: 图片链接
	data-por...

			
		

	



		

			
		



	

		

			

				
					
android 圆形相机预览拍照_Flutter自定义相机，Flutter相册选择照片

				
			

			

				

					weixin_39888807的博客
				

				

					01-02
					
					366
					
				

			

		

		

			
				
题记—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。实际项目开发中，谷歌官方推荐的几个相机插件总是满足不了需要，更令人不舒服的是在华为某些高版本系列的手机中使用系统相机拍照或者是选择照片会让应用闪退。小编也分析了原因，在这些手机拍照的照片过大，在手机相机拍完的那一瞬间，手机系统还没有处理完照片，然后应用就去读取这个照片，导致系统异常崩溃。至本插件编写的 0.0.1 版本时，各相机应用插件...

			
		

	





	

		

			

				
					
FlutterCamera:相机抖动

				
			

			

				

					03-12
				

			

		

		

			
				
flutter_app
 一个新的Flutter应用程序。
入门
该项目是Flutter应用程序的起点。
 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门：
要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。

			
		

	





	

		

			

				
					
Flutter camera自定义

				
			

			

				

					鲸落
				

				

					01-25
					
					5490
					
				

			

		

		

			
				
一、前言
之前用image_picker来进行调起摄像头进行拍摄，具体可看Flutter调用摄像头录像及获取视频信息。但是页面及相关功能都是封装好的，无法自定义，所以不合适。比如可以重复录制等等，而当前项目不允许重复录制，所以只能再找插件，也就是现在的camera。预览图如下：

二、引用
1 camera: 0.9.4
功能：调起摄像头，允许重制页面布局。安卓看一下配置要求。
地址：https://pub.dev/packages/camera
备注：我使用的版本是0.9.4，安卓下minSdkVersi

			
		

	





	

		

			

				
					
Flutter插件开发：调用原生功能

				
			

			

				

					
				

			

		

		

			
				
而Flutter插件则是为了在Flutter中调用原生功能而创建的扩展，可以通过插件调用原生UI组件、访问设备功能、使用原生第三方库等。  ## 1.2 为何需要调用原生功能  尽管Flutter提供了丰富的UI组件和功能，但有时候仍然...

			
		

	





	

		

			

				
					
Flutter 笔记 | Flutter Native 插件开发 (Android)

				
			

			

				

					川峰的博客
				

				

					05-20
					
					2122
					
				

			

		

		

			
				
BasicMessageChannel、 MethodChannel、 EventChannel是开发者和 Flutter Framework 进行通信的接口，它们的底层通信都是通过 messenger 字段所持有的BinaryMessenger接口来实现的。Platform view 允许将原生视图嵌入到 Flutter 应用中，所以您可以通过 Dart 将变换、裁剪和不透明度等效果应用到原生视图。
Flutter 支持两种集成模式：虚拟显示模式 (Virtual displays) 和混合集成模式 (

			
		

	





	

		

			

				
					
flutter图片识别_在 Flutter 中实现实时图像检测

				
			

			

				

					weixin_39901558的博客
				

				

					12-22
					
					2381
					
				

			

		

		

			
				
最近 Flutter 的官方插件 camera 加入了获取图像流的功能，利用该功能我们可以获取到相机预览的实时画面。我用 camera 和 tflite 插件做了一个结合 TensorFlow Lite 的 Flutter 实时图像识别的 demo。以下是在 iPad 上的演示视频：使用 camera 插件的图像流功能：首先按照 camera 插件 的文档在项目中加入相机功能。然后调用 camer...

			
		

	





	

		

			

				
					
Flutter选择相册图片和拍照示例

				
			

			

				

					03-08
				

			

		

		

			
				
Flutter选择图片和拍照示例，详情请看博客：https://yuzhiqiang.blog.csdn.net/article/details/88345232

			
		

	





	

		

			

				
					
flutter_camera_ml_vision：一个flutter小部件，用于显示相机流并允许在其上进行ML视觉识别，它使您能够检测条形码，标签，文本，面部。

				
			

			

				

					02-05
				

			

		

		

			
				
Flutter Camera Ml Vision
 适用于iOS和Android的Flutter软件包，可显示相机预览并使用Firebase ML Vision检测事物。
安装
首先，添加flutter_camera_ml_vision作为依赖项。 
...
dependencies :
  flutter :
    sdk : flutter
  flutter_camera_ml_vision : ^2.2.4
...
配置Firebase
 您还必须为每个平台项目（Android和iOS）配置Firebase（有关分步详细信息，请参见example文件夹或 ）。
的iOS
 在ios 

			
		

	





	

		

			

				
					
Flutter Camera插件使用入门

				
			

			

				

					01-03
				

			

		

		

			
				
文章目录0. 前言1. 安装1.1 iOS1.2 Android2. 测试项目2.1 示例代码2.2 演示结果3. 代码讲解3.1 cameras描述3.2 camera controller3.3 dispose销毁对象3.4 build 方法3.3 CameraPreview 对象
0. 前言
开发时需要用到Camera 来进行视频图片截取, 因此来写一些这方面内容
1. 安装
在pubspec.yaml 文件中添加 camera 依赖, 这里推荐使用一个vscode 插件:
Pubspec Assist: 可以很方便的管理dart 的包依赖

dependencies:
  flutte

			
		

	





	

		

			

				
					
Flutter笔记：使用相机

				
			

			

				

					jclee95的个人博客
				

				

					11-20
					
					3413
					
				

			

		

		

			
				
【简介】本文介绍在 Flutter 中 基于使用相机拍摄、录制、切换像头、调整焦距以及曝光等相关知识，以及相关的权限处理。各个部分都配备了操作步骤，以及使用案例，内容丰富翔实。



			
		

	





	

		

			

				
					
flutter安卓自定义相机camera

				
			

			

				

					weixin_42629287的博客
				

				

					07-03
					
					1588
					
				

			

		

		

			
				
实现效果

1.首先在pubspec.yaml引用插件
#相机
camera: ^0.5.8+2
video_player: ^0.10.11+1
flutter_image_compress: ^0.6.8
flutter_spinkit: ^4.1.2+1
2.新建IdentifyCard.dart类
代码如下
import 'dart:async';
import 'dart:io';

import 'package:camera/camera.dart';
import 'package:flut

			
		

	





	

		

			

				
					
flutter----相机开发

				
			

			

				

					luyi2913911073的博客
				

				

					12-22
					
					145
					
				

			

		

		

			
				
从录像页面页面跳转到另一个页面，这个页面使用chewie插件去播放视频，但是camera的CameraController()会占用很多内存，再使用chewie播放视频的话，内存就不够用了（对我而言内存是不够的，我使用的设备时iPhone8，2G内存。为了解决内存不够用的问题，我将camera功能封装到一个statefulwdiget类里面，做成一个widget在相机页面使用，从相机页面跳转到chewie播放视频页面之前，销毁掉这个statefulwdiget组件。就当我绝望之际，突然发现一件事。

			
		

	





	

		

			

				
					
flutter开发实战-Camera自定义相机拍照功能实现

				
			

			

				

					一名开发者
				

				

					02-02
					
					4281
					
				

			

		

		

			
				
在项目中使用image_picker插件时候，在android设备上使用无法默认设置前置摄像头（暂时不清楚什么原因），由于项目默认需要使用前置摄像头，所以最终采用自定义相机实现拍照功能。我们实现了实现自定义相机拍照的功能完整代码如下super.key,});///以下是关于手指缩放画面的变量Size?mediaSize;double?scale;double?String?@override。

			
		

	





	

		

			

				
					
flutter开发实战-自定义相机camera功能

				
			

			

				

					一名开发者
				

				

					07-25
					
					2427
					
				

			

		

		

			
				
flutter开发实战-自定义相机camera功能。Flutter 本质上只是一个 UI 框架，运行在宿主平台之上，Flutter 本身是无法提供一些系统能力，比如使用蓝牙、相机、GPS等，因此要在 Flutter 中调用这些能力就必须和原生平台进行通信。实现相机功能，我们使用的是camera插件。

			
		

	





	

		

			

				
					
flutter camera 获取图片转base64

				
			

			

				

					06-11
				

			

		

		

			
				
要使用 Flutter 的相机插件获取图片并将其转换为 Base64 格式，您可以使用以下方法：

1. 添加相机插件依赖

在 `pubspec.yaml` 文件中添加下面的依赖：

```yaml
dependencies:
  camera: ^0.9.4+5
```

2. 导入相机插件

在需要使用相机的文件中，导入相机插件：

```dart
import 'package:camera/camera.dart';
```

3. 初始化相机

在 `initState` 方法中初始化相机，并设置参数：

```dart
List<CameraDescription> cameras;

Future<void> _initializeCamera() async {
  cameras = await availableCameras();
  controller = CameraController(cameras[0], ResolutionPreset.medium);
  await controller.initialize();
  setState(() {});
}
```

4. 拍照并将图片转换为 Base64

在需要拍照的方法中，使用 `takePicture` 方法获取图片，并使用 `dart:convert` 包中的 `base64Encode` 方法将图片转换为 Base64 格式：

```dart
void _takePicture() async {
  if (!controller.value.isInitialized) {
    return;
  }
  final Directory extDir = await getApplicationDocumentsDirectory();
  final String dirPath = '${extDir.path}/Pictures/flutter_test';
  await Directory(dirPath).create(recursive: true);
  final String filePath = '$dirPath/${DateTime.now().millisecondsSinceEpoch}.jpg';

  await controller.takePicture(filePath);

  final File file = File(filePath);

  List<int> imageBytes = await file.readAsBytes();
  String base64Image = base64Encode(imageBytes);
  print(base64Image);
}
```

5. 完整示例代码

```dart
import 'dart:convert';
import 'dart:io';
import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Camera Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Camera Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CameraController controller;
  List<CameraDescription> cameras;

  Future<void> _initializeCamera() async {
    cameras = await availableCameras();
    controller = CameraController(cameras[0], ResolutionPreset.medium);
    await controller.initialize();
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    _initializeCamera();
  }

  void _takePicture() async {
    if (!controller.value.isInitialized) {
      return;
    }
    final Directory extDir = await getApplicationDocumentsDirectory();
    final String dirPath = '${extDir.path}/Pictures/flutter_test';
    await Directory(dirPath).create(recursive: true);
    final String filePath = '$dirPath/${DateTime.now().millisecondsSinceEpoch}.jpg';

    await controller.takePicture(filePath);

    final File file = File(filePath);

    List<int> imageBytes = await file.readAsBytes();
    String base64Image = base64Encode(imageBytes);
    print(base64Image);
  }

  @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: AspectRatio(
        aspectRatio: controller.value.aspectRatio,
        child: CameraPreview(controller),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _takePicture,
        tooltip: 'Take Picture',
        child: Icon(Icons.camera),
      ),
    );
  }

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

在上面的示例代码中，我们使用 `camera` 插件获取相机图片，并将其转换为 Base64 格式。在点击拍照按钮时，我们调用 `_takePicture` 方法，该方法会将图片保存到应用程序文档目录中的 `Pictures/flutter_test` 文件夹中，并将其转换为 Base64 格式。完成后，Base64 编码的图片数据将打印到控制台上。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值