Flutter图片保存到相册插件image_gallery_saver_v3的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter图片保存到相册插件image_gallery_saver_v3的使用

image_gallery_saver_v3 是一个用于在 Flutter 应用中将图片或视频保存到相册的插件。该插件是对原版 image_gallery_saver 的改进版本,使其与 Flutter 3 兼容。

功能概述

  • 从互联网保存图片:可以下载网络上的图片并将其保存到设备的相册中。
  • 从本地文件系统保存文件:可以将本地文件(如视频、GIF等)保存到设备的相册中。
  • 权限处理:插件提供了相应的权限处理方法,确保应用能够访问存储空间以进行文件操作。

使用步骤

  1. pubspec.yaml 文件中添加依赖项:
dependencies:
  image_gallery_saver: '^1.7.1'
  1. 在 iOS 和 Android 平台上配置相应的权限。
iOS 配置
  • 确保项目使用 Swift 创建。
  • Info.plist 文件中添加以下键值对:
<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要访问您的照片库以保存图片</string>
Android 配置
  • 请求存储权限:
dependencies:
  permission_handler: ^8.1.4 # 添加依赖
  • AndroidManifest.xml 中添加请求权限的属性:
<application android:requestLegacyExternalStorage="true" ...>

示例代码

以下是完整的示例代码,展示了如何使用 image_gallery_saver_v3 插件保存图片和视频到相册。

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

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:image_gallery_saver_v3/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:permission_handler/permission_handler.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '保存图片到相册',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey _globalKey = GlobalKey();

  [@override](/user/override)
  void initState() {
    super.initState();
    _requestPermission();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("保存图片到相册"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RepaintBoundary(
              key: _globalKey,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 15),
              child: ElevatedButton(
                onPressed: _saveScreen,
                child: Text("保存屏幕截图"),
              ),
              width: 200,
              height: 44,
            ),
            Container(
              padding: EdgeInsets.only(top: 15),
              child: ElevatedButton(
                onPressed: _getHttp,
                child: Text("保存网络图片"),
              ),
              width: 200,
              height: 44,
            ),
            Container(
              padding: EdgeInsets.only(top: 15),
              child: ElevatedButton(
                onPressed: _saveVideo,
                child: Text("保存网络视频"),
              ),
              width: 200,
              height: 44,
            ),
            Container(
              padding: EdgeInsets.only(top: 15),
              child: ElevatedButton(
                onPressed: _saveGif,
                child: Text("保存GIF到相册"),
              ),
              width: 200,
              height: 44,
            ),
          ],
        ),
      ),
    );
  }

  _requestPermission() async {
    Map<Permission, PermissionStatus> statuses = await [
      Permission.storage,
    ].request();

    final info = statuses[Permission.storage].toString();
    print(info);
    _toastInfo(info);
  }

  _saveScreen() async {
    RenderRepaintBoundary boundary =
        _globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
    ui.Image image = await boundary.toImage();
    ByteData? byteData = await (image.toByteData(format: ui.ImageByteFormat.png));
    if (byteData != null) {
      final result = await ImageGallerySaver.saveImage(byteData.buffer.asUint8List());
      print(result);
      _toastInfo(result.toString());
    }
  }

  _getHttp() async {
    var response = await Dio().get(
        "https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=a62e824376d98d1069d40a31113eb807/838ba61ea8d3fd1fc9c7b6853a4e251f94ca5f46.jpg",
        options: Options(responseType: ResponseType.bytes));
    final result = await ImageGallerySaver.saveImage(
        Uint8List.fromList(response.data),
        quality: 60,
        name: "hello");
    print(result);
    _toastInfo("$result");
  }

  _saveGif() async {
    var appDocDir = await getTemporaryDirectory();
    String savePath = appDocDir.path + "/temp.gif";
    String fileUrl =
        "https://hyjdoc.oss-cn-beijing.aliyuncs.com/hyj-doc-flutter-demo-run.gif";
    await Dio().download(fileUrl, savePath);
    final result = await ImageGallerySaver.saveFile(savePath);
    print(result);
    _toastInfo("$result");
  }

  _saveVideo() async {
    var appDocDir = await getTemporaryDirectory();
    String savePath = appDocDir.path + "/temp.mp4";
    String fileUrl =
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4";
    await Dio().download(fileUrl, savePath, onReceiveProgress: (count, total) {
      print((count / total * 100).toStringAsFixed(0) + "%");
    });
    final result = await ImageGallerySaver.saveFile(savePath);
    print(result);
    _toastInfo("$result");
  }

  _toastInfo(String info) {
    Fluttertoast.showToast(msg: info, toastLength: Toast.LENGTH_LONG);
  }
}

更多关于Flutter图片保存到相册插件image_gallery_saver_v3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片保存到相册插件image_gallery_saver_v3的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个使用 image_gallery_saver_v3 插件在 Flutter 中将图片保存到相册的示例代码。

首先,确保在你的 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  image_gallery_saver_v3: ^0.0.3  # 请检查最新版本号

然后,运行 flutter pub get 以获取依赖。

接下来,在你的 Dart 文件中,你可以使用以下代码来保存图片到相册:

import 'package:flutter/material.dart';
import 'package:image_gallery_saver_v3/image_gallery_saver_v3.dart';
import 'dart:typed_data';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Save Image to Gallery Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _saveImageToGallery,
            child: Text('Save Image'),
          ),
        ),
      ),
    );
  }

  Future<void> _saveImageToGallery() async {
    // Create a simple red square image (200x200) as an example
    final Uint8List imageBytes = await _createRedSquareImage(200, 200);

    // Save the image to the gallery
    final bool result = await ImageGallerySaver.saveImage(imageBytes);

    if (result) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Image saved to gallery successfully!')),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to save image to gallery.')),
      );
    }
  }

  Future<Uint8List> _createRedSquareImage(int width, int height) async {
    final PictureRecorder recorder = PictureRecorder();
    final Canvas canvas = Canvas(recorder);

    final Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;

    canvas.drawRect(Rect.fromLTWH(0, 0, width.toDouble(), height.toDouble()), paint);

    final Picture picture = recorder.endRecording();
    final ImageByteFormat format = ImageByteFormat.png;

    final ByteData byteData = await picture.toImage(width, height)
        .toByteData(format: format);

    return byteData.buffer.asUint8List();
  }
}

代码解释

  1. 依赖添加:在 pubspec.yaml 文件中添加 image_gallery_saver_v3 依赖。
  2. 主应用:在 MyApp 中,我们创建了一个简单的 Flutter 应用,包含一个按钮,用于触发保存图片的操作。
  3. 生成图片_createRedSquareImage 方法生成一个简单的红色正方形图片(200x200 像素)。
  4. 保存图片:点击按钮时,调用 _saveImageToGallery 方法,该方法使用 ImageGallerySaver.saveImage 将生成的图片保存到相册。
  5. 结果反馈:根据保存操作的成功与否,显示相应的 SnackBar 提示。

注意事项

  • 确保在 Android 和 iOS 上都配置了相应的权限。
    • Android:在 AndroidManifest.xml 中添加 WRITE_EXTERNAL_STORAGE 权限。
    • iOS:在 Info.plist 中添加 NSPhotoLibraryAddUsageDescription 权限说明。
  • 在实际项目中,你可能需要处理更复杂的图片生成逻辑,或者从网络加载图片。

希望这个示例对你有帮助!

回到顶部