在Flutter中保存照片（尤其是相机胶卷）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Flutter中保存照片（尤其是相机胶卷）相关的知识，希望对你有一定的参考价值。

我无法弄清楚如何保存到相机胶卷（相当于React Native的CameraRoll saveToCameraRoll()。

  1. Flutter camera建议使用path_provider来获取应用程序目录，但它似乎没有获取相机卷目录路径的选项。
  2. 我在CameraController.capture上遇到了例外

相关的变化（只有相关的变化，以差异的形式）在这里：https://gist.github.com/briankung/45f9d8438baab59ddcd3b6f3fe811d99

我的整个main.dart下面是容易repro（搜索QUESTION:找到相关部分）：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';

List<CameraDescription> cameras;

Future<Null> main() async {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);

  cameras = await availableCameras();
  runApp(new CameraApp());
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => new _CameraAppState();
}

class _CameraAppState extends State<CameraApp> {
  String _appDirectoryPath;
  CameraController controller;

  Future<void> _requestAppDirectory() async {
    // QUESTION: `path_provider` doesn't have getCameraRollDirectory()
    Directory _appDirectory = await getApplicationDocumentsDirectory();

    setState(() {
      _appDirectoryPath = _appDirectory.path;
    });
  }

  @override
  void initState() {
    super.initState();
    _requestAppDirectory();
    controller = new CameraController(cameras[0], ResolutionPreset.medium);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    if (!controller.value.initialized) {
      return new Container();
    }

    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new Scaffold(
        body: new Center(
          child: new AspectRatio(
            aspectRatio: controller.value.aspectRatio,
            child: new CameraPreview(controller),
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          tooltip: 'Increment',
          child: new Icon(Icons.camera),
          onPressed: () {
            print('capturing');
            print(_appDirectoryPath);
            // QUESTION: this errors out
            controller.capture(_appDirectoryPath);
          },
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      ),
    );
  }
}

日志信息如下：

I/flutter ( 5471): capturing
I/flutter ( 5471): /data/user/0/com.example.mycameraapp/app_flutter
W/LegacyRequestMapper( 5471): convertRequestMetadata - control.awbRegions setting is not supported, ignoring value
W/LegacyRequestMapper( 5471): Only received metering rectangles with weight 0.
W/LegacyRequestMapper( 5471): Only received metering rectangles with weight 0.
I/RequestThread-0( 5471): Received jpeg.
I/RequestThread-0( 5471): Producing jpeg buffer...
W/LegacyRequestMapper( 5471): convertRequestMetadata - control.awbRegions setting is not supported, ignoring value
W/LegacyRequestMapper( 5471): Only received metering rectangles with weight 0.
W/LegacyRequestMapper( 5471): Only received metering rectangles with weight 0.
E/flutter ( 5471): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
E/flutter ( 5471): CameraException(IOError, Failed saving image)
E/flutter ( 5471): #0      CameraController.capture (package:camera/camera.dart:234:7)
E/flutter ( 5471): <asynchronous suspension>
E/flutter ( 5471): #1      _CameraAppState.build.<anonymous closure> (file:///Users/briankung/workspace/mobile/flutter/my_camera_app/lib/main.dart:84:24)
E/flutter ( 5471): #2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:478:14)
E/flutter ( 5471): #3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:530:30)
E/flutter ( 5471): #4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
E/flutter ( 5471): #5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:161:9)
E/flutter ( 5471): #6      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:123:7)
E/flutter ( 5471): #7      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156:27)
E/flutter ( 5471): #8      _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147:20)
E/flutter ( 5471): #9      _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121:22)
E/flutter ( 5471): #10     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101:7)
E/flutter ( 5471): #11     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64:7)
E/flutter ( 5471): #12     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48:7)
E/flutter ( 5471): #13     _invoke1 (dart:ui/hooks.dart:134:13)
E/flutter ( 5471): #14     _dispatchPointerDataPacket (dart:ui/hooks.dart:91:5)
I/RequestQueue( 5471): Repeating capture request cancelled.

谢谢！

忘记版本号：

$ flutter --version
Flutter 0.2.8 • channel beta • https://github.com/flutter/flutter.git
Framework • revision b397406561 (10 days ago) • 2018-04-02 13:53:20 -0700
Engine • revision c903c217a1
Tools • Dart 2.0.0-dev.43.0.flutter-52afcba357

// pubspec.yaml

camera:
  dependency: "direct main"
  description:
    name: camera
    url: "https://pub.dartlang.org"
  source: hosted
  version: "0.1.2"
path_provider:
  dependency: "direct main"
  description:
    name: path_provider
    url: "https://pub.dartlang.org"
  source: hosted
  version: "0.4.0"
答案

不幸的是，我不认为扑动目前暴露了这个功能。

你最好的选择可能是写一个插件或使用Platform Channels来执行此操作。您可以像在this example中一样使用临时目录，然后将路径传递给android，在那里您将读取文件并将其插入到库中，如下所示：

MediaStore.Images.Media.insertImage(
      getContentResolver(), 
      yourBitmap, 
      yourTitle , 
      yourDescription
);`

如果您在其中一个flutter存储库中创建功能请求，并且有人决定通过为您编写插件来帮助您，那么您可能会很幸运。

另一答案

你得到的错误是因为你试图将照片保存到/data/user/0/com.example.mycameraapp/app_flutter这是一个目录，而不是一个文件。

您可以使用flutter_photokit包将照片/视频保存到ios上的用户相机胶卷/自定义相册。您需要将照片捕获到设备的临时目录或应用程序目录，然后从那里将文件传输到用户的相机胶卷。示例的相关部分如下所示：

// At the top
import 'package:flutter_photokit/flutter_photokit.dart';

// Function in _CameraAppState
void _captureAndSaveToCameraRoll() async {
  String outputFilePath = '$_appDirectoryPath/test.jpg';
  // Capture the photo to the app directory
  await controller.capture(outputFilePath);
  // Save the photo to the user's camera roll
  FlutterPhotokit.saveToCameraRoll(filePath: outputFilePath);
}

...

// In your build function
floatingActionButton: new FloatingActionButton(
  tooltip: 'Increment',
  child: new Icon(Icons.camera),
  onPressed: _captureAndSaveToCameraRoll,
)

免责声明：我是这个插件的作者。

以上是关于在Flutter中保存照片（尤其是相机胶卷）的主要内容，如果未能解决你的问题，请参考以下文章

科尔多瓦，从相机胶卷中获取所有照片

在swiftui中保存照片？

从 Swift 中的相机胶卷连拍中删除单张照片

如何从相机胶卷中挑选照片

如何对相机胶卷中的照片进行方形切割？

使用照片框架删除相机胶卷资产