Flutter图片保存插件flutter_image_saver的使用

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

Flutter图片保存插件flutter_image_saver的使用

简介

flutter_image_saver 是一个简单且高效的跨平台图片保存插件，支持Web和桌面应用。通过这个插件，你可以轻松地将图片保存到设备的相册或文件系统中。

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_image_saver 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_image_saver: ^latest_version

替换 latest_version 为最新的版本号。

2. 配置平台特定设置
Android

在 android/app/src/main/AndroidManifest.xml 文件中，添加以下配置以确保插件正常工作：

<application
    ...
    android:requestLegacyExternalStorage="true">
    ...
</application>
iOS

在 ios/Runner/Info.plist 文件中，添加以下权限描述：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>我们需要访问您的相册以保存图片</string>
3. 使用示例代码

下面是一个完整的示例代码，展示了如何使用 flutter_image_saver 插件将FlutterLogo保存为图片并下载到设备中。

import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_image_saver/flutter_image_saver.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(home: Home());
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final repaintBoundary = GlobalKey(); // 用于捕获绘制的图像

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RepaintBoundary( // 包裹需要保存的Widget
          key: repaintBoundary,
          child: const FlutterLogo(size: 120), // 要保存的Widget
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.download), // 下载按钮
        onPressed: save, // 点击按钮时调用save方法
      ),
    );
  }

  void save() async {
    try {
      // 获取RepaintBoundary中的渲染对象
      final boundary = repaintBoundary.currentContext!.findRenderObject()! as RenderRepaintBoundary;
      
      // 将渲染对象转换为图像
      final image = await boundary.toImage(pixelRatio: 2); // 设置像素比例为2，提高图像质量
      
      // 将图像转换为字节数组
      final byteData = await image.toByteData(format: ImageByteFormat.png);
      
      // 保存图像到设备
      final path = await saveImage(byteData!.buffer.asUint8List(), 'flutter.png');
      
      // 显示保存结果
      final message = path.isEmpty ? 'Saved' : 'Saved to $path';
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(message)));
    } catch (e) {
      // 捕获异常并显示错误信息
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to save image')));
    }
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_image_saver插件来保存图片的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_image_saver依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_image_saver: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在Dart文件中导入并使用这个插件。以下是一个完整的示例，包括如何加载图片并将其保存到设备存储中。

import 'package:flutter/material.dart';
import 'package:flutter_image_saver/flutter_image_saver.dart';
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('Flutter Image Saver Example'),
        ),
        body: Center(
          child: ImageSaverDemo(),
        ),
      ),
    );
  }
}

class ImageSaverDemo extends StatefulWidget {
  @override
  _ImageSaverDemoState createState() => _ImageSaverDemoState();
}

class _ImageSaverDemoState extends State<ImageSaverDemo> {
  final GlobalKey _imageKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RepaintBoundary(
          key: _imageKey,
          child: Container(
            width: 300,
            height: 300,
            color: Colors.amber,
            child: Center(
              child: Text(
                'Save Me!',
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
            ),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            try {
              // 渲染RepaintBoundary到图片
              RenderRepaintBoundary boundary =
                  _imageKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
              ui.Image image = await boundary.toImage();
              ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
              Uint8List pngBytes = byteData!.buffer.asUint8List();

              // 使用flutter_image_saver保存图片
              String result = await FlutterImageSaver.saveImage(pngBytes, name: 'saved_image');
              print('Image saved to $result');
            } catch (e) {
              print('Failed to save image: $e');
            }
          },
          child: Text('Save Image'),
        ),
      ],
    );
  }
}

代码解释：

  1. 依赖导入：在pubspec.yaml中添加flutter_image_saver依赖。
  2. UI结构：
    • 使用RepaintBoundary包裹要保存的图片内容，并为其分配一个GlobalKey。
    • 使用ElevatedButton触发保存图片的操作。
  3. 保存图片逻辑：
    • 使用RenderRepaintBoundary的toImage()方法将RepaintBoundary的内容渲染成ui.Image。
    • 将ui.Image转换为ByteData，再转换为Uint8List。
    • 使用FlutterImageSaver.saveImage()方法将图片保存到设备存储。

这样，当你点击按钮时，应用会将包含文本“Save Me!”的琥珀色容器保存为PNG图片到设备存储中。注意，保存路径和文件名可能会因设备和操作系统而异。

回到顶部