与Flutter共享本地图像

时间:2019-09-10 16:09:42

标签: flutter dart share

我想分享我从CameraController拍摄的图像。

文件的位置例如为/data/user/0/com.user.test/cache/2019-09-10 16:32:52.281842.png

如何共享此本地图像?

我添加了这两行以进行本地存储的读/写:

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

我使用https://pub.dev/packages/esys_flutter_share中的共享组件,效果很好。

void _sharePicture() async {
    print('Share picture');
    print(this.imagePath);

    final ByteData bytes = await rootBundle.load(this.imagePath);
    await Share.file('esys image', 'esys.png', bytes.buffer.asUint8List(), 'image/png', text: 'My optional text.');
  }

this.imagePath是文件的本地位置::/data/user/0/com.user.test/cache/2019-09-10 16:32:52.281842.png

首先必须保存图像吗?并将其用于共享?如何共享此本地图像?

1 个答案:

答案 0 :(得分:1)

这个想法是分享Uint8List

此演示使用camera_camera包的示例。 https://github.com/gabuldev/camera_camera/tree/master/example
camera_camera软件包https://pub.dev/packages/camera_camera是一个很棒的软件包,具有完善的功能并在

内使用camera插件

代码段
单击拍照后,系统返回文件(在此示例中为val),读取字节并传输到Uint8List

  print("path ${val}");
  List<int> bytes = await val.readAsBytes();
  Uint8List ubytes = Uint8List.fromList(bytes);
  await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');

完整代码

import 'dart:io';


import 'package:flutter/material.dart';
import 'package:camera_camera/camera_camera.dart';
import 'dart:typed_data';
import 'package:esys_flutter_share/esys_flutter_share.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  File val;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Rully")),
        floatingActionButton: FloatingActionButton(
            child: Icon(Icons.camera_alt),
            onPressed: () async {
              val = await showDialog(
                  context: context,
                  builder: (context) => Camera(
                        mode: CameraMode.fullscreen,
                        orientationEnablePhoto: CameraOrientation.landscape,
                        /*
                        imageMask: CameraFocus.square(
                          color: Colors.black.withOpacity(0.5),
                        ),
                        */
                      ));

              print("path ${val}");
              List<int> bytes = await val.readAsBytes();
              Uint8List ubytes = Uint8List.fromList(bytes);
              await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');

              setState(() {});
            }),
        body: Center(
            child: Container(
                height: MediaQuery.of(context).size.height * 0.7,
                width: MediaQuery.of(context).size.width * 0.8,
                child: val != null
                    ? Image.file(
                        val,
                        fit: BoxFit.contain,
                      )
                    : Text("Tire a foto"))));
  }
}

演示屏幕
在camera_camera示例中,“拍照”按钮将在横向mdoe中显示
文件路径显示在底部

enter image description here

对于相机插件官方示例,我仅更改以下内容
代码段

void onTakePictureButtonPressed() {
    takePicture().then((String filePath) async{
      if (mounted) {
        setState(() {
          imagePath = filePath;
          videoController?.dispose();
          videoController = null;
        });
        if (filePath != null) {
          showInSnackBar('Picture saved to $filePath');
          File val = File(filePath);
          List<int> bytes = await val.readAsBytes();
          Uint8List ubytes = Uint8List.fromList(bytes);
          await Share.file('ESYS AMLOG', 'amlog.jpg', ubytes, 'image/jpg');
        }
      }
    });
  }

enter image description here

enter image description here