Flutter图片保存到相册插件image_gallery_saver_v3的使用
Flutter图片保存到相册插件image_gallery_saver_v3的使用
image_gallery_saver_v3
是一个用于在 Flutter 应用中将图片或视频保存到相册的插件。该插件是对原版 image_gallery_saver
的改进版本,使其与 Flutter 3 兼容。
功能概述
- 从互联网保存图片:可以下载网络上的图片并将其保存到设备的相册中。
- 从本地文件系统保存文件:可以将本地文件(如视频、GIF等)保存到设备的相册中。
- 权限处理:插件提供了相应的权限处理方法,确保应用能够访问存储空间以进行文件操作。
使用步骤
- 在
pubspec.yaml
文件中添加依赖项:
dependencies:
image_gallery_saver: '^1.7.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();
}
}
代码解释
- 依赖添加:在
pubspec.yaml
文件中添加image_gallery_saver_v3
依赖。 - 主应用:在
MyApp
中,我们创建了一个简单的 Flutter 应用,包含一个按钮,用于触发保存图片的操作。 - 生成图片:
_createRedSquareImage
方法生成一个简单的红色正方形图片(200x200 像素)。 - 保存图片:点击按钮时,调用
_saveImageToGallery
方法,该方法使用ImageGallerySaver.saveImage
将生成的图片保存到相册。 - 结果反馈:根据保存操作的成功与否,显示相应的 SnackBar 提示。
注意事项
- 确保在 Android 和 iOS 上都配置了相应的权限。
- Android:在
AndroidManifest.xml
中添加WRITE_EXTERNAL_STORAGE
权限。 - iOS:在
Info.plist
中添加NSPhotoLibraryAddUsageDescription
权限说明。
- Android:在
- 在实际项目中,你可能需要处理更复杂的图片生成逻辑,或者从网络加载图片。
希望这个示例对你有帮助!