美文网首页
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>

    相关文章

      网友评论

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

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