一、获取相册照片,相机拍摄
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>
网友评论