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

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

作者: 小y想吃糖 | 来源:发表于2024-10-17 10:27 被阅读0次


示例

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

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>

相关文章

  • 小程序原生API收集--媒体API

    1、从相册选择图片,或使用相机拍照 2、预览图片 3、获取图片信息 4、保存图片到系统相册

  • Flutter 图片裁剪(相机,相册)

    今天用到了一个特别好用的图片裁剪库,在这里分享一下Copper 先看一下效果图 这个裁剪库还是蛮强的,有左右旋转,...

  • iOS 图片裁剪

    图片裁剪根据需求自行设置newSize如果是等比例裁剪(宽高比不变的情况下),可将从相册或者相机拿到的图片获取im...

  • 系统SDK介绍-02

    系统SDK介绍 打开相册选择图片 打开相册选择视频 打开相机拍摄图片 打开相机拍摄视频 配置权限: 在info.p...

  • 图片选择器

    场景:以前只有相机拍照、相册选照片,这两种都是本地图片,获取的uiimage属性 ,如果还有网络图片,你的数组里面...

  • iOS开发小技巧之自定制IOS系统图片裁剪

    背景 由于项目需求从手机相册中取出图片或者拍摄照片后对图片进行固定尺寸裁剪,而系统提供的UIImagePicker...

  • iOS保存(获取)图片到相册

    iOS保存图片到相册 二 : 获取系统的相册图片(一张或者多张) 1.获取一张相册里的图片(图片 == 1) 获取...

  • iOS 图片浏览的放大缩小

    功能描述:支持网络和本地gif、jpeg等格式图片的浏览、捏合或双击放大缩小、长按保存到本地相册、获取gif图片的...

  • TakePhoto 简介

    TakePhoto 是一款用于在Android设备上获取照片(拍照或从相册、文件中选择)、裁剪图片、压缩图片的开源...

  • Android 编辑头像功能简单实现(图片选取,裁剪)

    拍照 从相册中选取 裁剪选取或拍摄的图片 重写OnActivityResult方法获取并设置对应数据 最终效果展示

网友评论

      本文标题:flutter 获取相册照片,相机拍摄,裁剪图片,保存网络图片等

      本文链接:https://www.haomeiwen.com/subject/lrdfdjtx.html