flutter 获取相册照片,相机拍摄,裁剪图片,保存网络图片等

2024-10-17  本文已影响0人  小y想吃糖


示例

一、获取相册照片,相机拍摄

1、在【pubspec.yaml】中添加以下三方库:
(1)image_picker: 调取系统相册或者相机
(2)image_cropper: 照片裁剪

2、在文件顶部导入头文件:

(1)import 'dart:io'; 处理文件、网络通讯需要导入此文件
(2)import 'package:image_picker/image_picker.dart';
         import 'package:image_cropper/image_cropper.dart';
         导入上方三方库文件。

3、编写代码
(1)裁剪图片:这里默认裁剪成正方形,没有比例选项

ImageCropper cropper = ImageCropper();
Future<File?> cropImage(File imageFile) async {
final File? croppedFile = await cropper.cropImage(
sourcePath: imageFile.path,
aspectRatio: const CropAspectRatio(ratioX: 1, ratioY: 1),
compressFormat: ImageCompressFormat.png,
maxWidth: 699,
maxHeight: 699);
return croppedFile;}

如果想添加比例选项,或者自定义裁剪,那么需要在cropper.cropImage中定义aspectRatioPresets属性,这是一个数组,包括[CropAspectRatioPreset.original, CropAspectRatioPreset.square, CropAspectRatioPreset.ratio3x2, CropAspectRatioPreset.ratio4x3, CropAspectRatioPreset.ratio16x9]这些选项,添加后就会出现比例选择按钮。

(2)选择相册里的照片

File imageFile = File('');
Future<void> selectImage() async {
final ImagePicker picker = ImagePicker();
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
if (image != null) {
File? croppedFile = await cropImage(File(image.path));//调用裁剪方法
setState(() {
 imageFile = croppedFile!;});
} else {
print('没有选中图片');}}

(3)调起相机拍摄照片

Future<void> takePicture() async {
final ImagePicker _picker = ImagePicker();
final XFile? image = await _picker.pickImage(source: ImageSource.camera);
 if (image != null) {
File? croppedFile = await cropImage(File(image.path));;//调用裁剪方法
setState(() {
imageFile = croppedFile!; });
 } else {
print('没有拍摄图片'); } }

获取到的imageFile如果想要在界面展示,需要使用Image.file(imageFile)方法实现。

二、保存网络图片

1、在【pubspec.yaml】中添加以下三方库:
(1)http:获取网络图片
(2)path_provider:获取路径
(3)image_gallery_saver: 保存图片到相册

2、在文件顶部导入头文件:

import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

3、编写保存图片代码,传入网络图片的链接

Future<String> saveNetworkImageToFile(String imageUrl) async {
final response = await http.get(Uri.parse(imageUrl));
final directory = await getApplicationDocumentsDirectory();
final filePath = '${directory.path}/image.png';
final file = File(filePath);
await file.writeAsBytes(response.bodyBytes);
final result =
await ImageGallerySaver.saveImage(response.bodyBytes.buffer.asUint8List());
return result;}

⭐️⭐️⭐️
1、添加三方库后,需要到命令行给iOS文件目录执行“pod install”命令。
2、需要分别在AndroidManifest.xml(for 安卓设备)、Info.plist(for iOS设备)中添加相应的权限开启字段。
(1)AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
<application ........其他代码

(2)Info.plist

<key>NSCameraUsageDescription</key>
<string>我们需要您的同意来拍照</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>我们需要您的同意来访问相册</string>

上一篇下一篇

猜你喜欢

热点阅读