Flutter拍照与选择照片并且保存到本地

本文介绍了如何在Flutter应用中使用image_picker插件来实现从相机或相册选择图片。该插件支持Android和iOS,但在部分设备上可能遇到相机闪退问题。示例代码展示了如何初始化、调用相机和相册功能,并显示所选图片。此外,还提及了image_picker_web作为Web平台的替代方案,以及image_gallery_saver用于保存图片到本地。建议进行真机调试以解决兼容性问题。
摘要由CSDN通过智能技术生成

本文使用:image_picker插件

该插件已支持Android与IOS

需要适配web的同学可以使用:image_picker_web

(可以完成开发中的大部分需求,但有部分机型会出现调用相机时闪退问题)

话不多说先上效果图:

拍照:

请添加图片描述

相册:
请添加图片描述

核心代码:

final picker = ImagePicker(); //初始化
///存放的图片
File _imgPath;

Future getImage(bool isTakePhoto) async {
  try {
    var pickedFile = await picker.getImage(
        source: isTakePhoto ? ImageSource.camera : ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imgPath = File(pickedFile.path);
      });
    } else {
      print('没有选择任何图片');
    }
  } catch (e) {
    print("该手机不支持相机");
  }
}

具体代码:

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class ImageTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ImageState();
}

class ImageState extends State<ImageTest> {
  final picker = ImagePicker();
  File _imgPath;

  Future getImage(bool isTakePhoto) async {
    try {
      var pickedFile = await picker.getImage(
          source: isTakePhoto ? ImageSource.camera : ImageSource.gallery);
      if (pickedFile != null) {
        setState(() {
          _imgPath = File(pickedFile.path);
        });
      } else {
        print('没有选择任何图片');
      }
    } catch (e) {
      print("该手机不支持相机");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          MaterialButton(
              minWidth: 100,
              height: 100,
              color: Colors.blue,
              onPressed: () {
                getImage(true);
              },
              child: Text(
                "拍照",
                style: TextStyle(fontSize: 32, color: Colors.white),
              )),
          SizedBox(
            height: 30,
          ),
          MaterialButton(
              minWidth: 100,
              height: 100,
              color: Colors.blue,
              onPressed: () {
                getImage(false);
              },
              child: Text("选择照片",
                  style: TextStyle(fontSize: 32, color: Colors.white))),
          _imgPath != null
              ? Image.file(
                  _imgPath,
                  fit: BoxFit.cover,
                )
              : Center(
                  child: Text(
                  "没有选择照片",
                  style: TextStyle(fontSize: 32, color: Colors.black)s,
                ))
        ],
      ),
    );
  }
}
注意:此处保存的图片存放在缓存中,如果需要保存到本地则需使用image_gallery_saver,用于保存。

本章中,若各位同学有遇到机型不兼容问题,可以私信博主,建议真机调试哦~

欢迎留言纠正 ~ 不妨给个点赞哈哈

我是阿T一个幽默的程序员 我们下期再见~

添加我为你的好友,领取源码以及Flutter学习资料~

在这里插入图片描述

加入我们吧,一起学习,一起进步~

在这里插入图片描述

要将Flutter中的图片保存到本地并分享到QQ,你可以按照以下步骤操作: 1. 将图片保存到本地存储,可以使用以下代码: ```dart import 'dart:io'; import 'package:flutter/material.dart'; import 'package:path_provider/path_provider.dart'; import 'package:image_gallery_saver/image_gallery_saver.dart'; Future<void> saveImageToGallery(BuildContext context, String imageUrl) async { try { // 获取应用程序目录 Directory appDocDir = await getApplicationDocumentsDirectory(); // 获取文件名 String fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1); // 组合路径 String filePath = "${appDocDir.path}/$fileName"; // 下载图片 HttpClient httpClient = HttpClient(); HttpClientRequest request = await httpClient.getUrl(Uri.parse(imageUrl)); HttpClientResponse response = await request.close(); Uint8List bytes = await consolidateHttpClientResponseBytes(response); // 保存图片到本地 File file = File(filePath); await file.writeAsBytes(bytes); // 保存图片到相册 await ImageGallerySaver.saveImage(bytes); ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("图片已保存到相册"), )); } catch (e) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("保存图片失败: $e"), )); } } ``` 2. 调用QQ分享功能,可以使用以下代码: ```dart import 'package:flutter/material.dart'; import 'package:flutter_qq_share/flutter_qq_share.dart'; Future<void> shareImageToQQ(BuildContext context, String imageUrl) async { try { // 获取应用程序目录 Directory appDocDir = await getApplicationDocumentsDirectory(); // 获取文件名 String fileName = imageUrl.substring(imageUrl.lastIndexOf("/") + 1); // 组合路径 String filePath = "${appDocDir.path}/$fileName"; // 下载图片 HttpClient httpClient = HttpClient(); HttpClientRequest request = await httpClient.getUrl(Uri.parse(imageUrl)); HttpClientResponse response = await request.close(); Uint8List bytes = await consolidateHttpClientResponseBytes(response); // 保存图片到本地 File file = File(filePath); await file.writeAsBytes(bytes); // 分享图片到QQ await FlutterQQShare.shareImageToQQ(filePath); } catch (e) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text("分享图片失败: $e"), )); } } ``` 调用 `saveImageToGallery` 函数可以将图片保存到本地保存到相册,调用 `shareImageToQQ` 函数可以将图片分享到QQ。你可以根据自己的需求修改和调整这些代码。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程的平行世界

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值