Flutter图片保存插件 gallery_saver 的使用

Gallery Saver 是一个用于将图片和视频从网络或临时文件保存到外部存储的Flutter插件。保存后的图片和视频可以在Android相册和iOS照片中查看。

注意事项

• 如果你想保存网络上的图片或视频链接，链接必须包含 'http/https' 前缀。

安装

首先，在你的 pubspec.yaml 文件中添加 gallery_saver 作为依赖项：

dependencies:
  gallery_saver: ^2.0.0 # 请根据最新版本调整

iOS 配置

在 <项目根目录>/ios/Runner/Info.plist 文件中添加以下键值对：

<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要访问您的相册来保存图片和视频。</string>

Android 配置

在 AndroidManifest.xml 文件中添加以下权限：

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

示例代码

下面是一个完整的示例demo，展示了如何使用 gallery_saver 插件来保存图片和视频。

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:image_picker/image_picker.dart';
import 'package:gallery_saver/gallery_saver.dart';
import 'package:path_provider/path_provider.dart';

double textSize = 20;

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String firstButtonText = '拍照';
  String secondButtonText = '录制视频';
  String albumName = 'Media';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            color: Colors.white,
            child: Column(
              children: <Widget>[
                Flexible(
                  flex: 1,
                  child: Container(
                    child: SizedBox.expand(
                      child: TextButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.blue),
                        ),
                        onPressed: _takePhoto,
                        child: Text(firstButtonText,
                            style: TextStyle(fontSize: textSize, color: Colors.white)),
                      ),
                    ),
                  ),
                ),
                ScreenshotWidget(),
                Flexible(
                  child: Container(
                    child: SizedBox.expand(
                      child: TextButton(
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(Colors.white),
                        ),
                        onPressed: _recordVideo,
                        child: Text(secondButtonText,
                            style: TextStyle(fontSize: textSize, color: Colors.blueGrey)),
                      ),
                    ),
                  ),
                  flex: 1,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

  void _takePhoto() async {
    final pickedFile = await ImagePicker().getImage(source: ImageSource.camera);
    if (pickedFile != null && pickedFile.path != null) {
      setState(() {
        firstButtonText = '保存中...';
      });
      GallerySaver.saveImage(pickedFile.path, albumName: albumName).then((bool success) {
        setState(() {
          firstButtonText = '图片已保存！';
        });
      });
    }
  }

  void _recordVideo() async {
    final pickedFile = await ImagePicker().getVideo(source: ImageSource.camera);
    if (pickedFile != null && pickedFile.path != null) {
      setState(() {
        secondButtonText = '保存中...';
      });
      GallerySaver.saveVideo(pickedFile.path, albumName: albumName).then((bool success) {
        setState(() {
          secondButtonText = '视频已保存！';
        });
      });
    }
  }
}

class ScreenshotWidget extends StatefulWidget {
  @override
  _ScreenshotWidgetState createState() => _ScreenshotWidgetState();
}

class _ScreenshotWidgetState extends State<ScreenshotWidget> {
  final GlobalKey _globalKey = GlobalKey();
  String screenshotButtonText = '保存截图';

  @override
  Widget build(BuildContext context) {
    return Flexible(
      flex: 1,
      child: RepaintBoundary(
        key: _globalKey,
        child: Container(
          child: SizedBox.expand(
            child: TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.pink),
              ),
              onPressed: _saveScreenshot,
              child: Text(screenshotButtonText,
                  style: TextStyle(fontSize: textSize, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }

  Future<void> _saveScreenshot() async {
    setState(() {
      screenshotButtonText = '保存中...';
    });
    try {
      // 提取字节数据
      final RenderRepaintBoundary boundary = _globalKey.currentContext.findRenderObject();
      final ui.Image image = await boundary.toImage(pixelRatio: 3.0);
      final ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      final Uint8List pngBytes = byteData.buffer.asUint8List();

      // 创建文件
      final String dir = (await getApplicationDocumentsDirectory()).path;
      final String fullPath = '$dir/${DateTime.now().millisecond}.png';
      File capturedFile = File(fullPath);
      await capturedFile.writeAsBytes(pngBytes);
      print(capturedFile.path);

      await GallerySaver.saveImage(capturedFile.path).then((value) {
        setState(() {
          screenshotButtonText = '截图已保存！';
        });
      });
    } catch (e) {
      print(e);
    }
  }
}

这个示例展示了如何通过相机拍摄图片和视频，并将其保存到设备的相册中。此外，还演示了如何截取屏幕并保存为图片。希望这对您有所帮助！