Flutter云存储与图像处理插件cloudnary

Flutter云存储与图像处理插件cloudnary_flutter的使用

本项目是一个用于演示如何在Flutter应用中使用cloudnary_flutter插件进行云存储和图像处理的示例。

开始使用

本项目旨在作为Flutter插件包的一个起点。它包含Android和/或iOS平台上的特定实现代码。

对于如何开始使用Flutter，您可以查看我们的在线文档，其中提供了教程、示例、移动开发指导以及完整的API参考。

示例代码

以下是使用cloudnary_flutter插件的完整示例代码：

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:cloudnary_flutter/cloudnary_flutter.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们通过一个异步方法来初始化。
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用try/catch来捕获PlatformException。
    // 我们还处理了消息可能返回null的情况。
    try {
      platformVersion = await CloudnaryFlutter.uploadToCloudnary(
        "YOUR_CLOUD_NAME", // 你的云名称
        "YOUR_API", // 你的API密钥
        "YOUR_API_SECRET", // 你的API密钥秘密
        "PUBLIC_ID", // 公共ID
        "YOUR_NOTIFICATION_URL", // 通知URL
        "PATH", // 文件路径
      ) ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果在异步平台消息还在飞行时，该小部件被从树中移除，
    // 我们想要丢弃回复而不是调用setState来更新我们不存在的外观。
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

说明

导入必要的库：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:cloudnary_flutter/cloudnary_flutter.dart';

定义主应用类：

void main() {
  runApp(const MyApp());
}

初始化状态并上传文件到Cloudinary：

Future<void> initPlatformState() async {
  String platformVersion;
  try {
    platformVersion = await CloudnaryFlutter.uploadToCloudnary(
      "YOUR_CLOUD_NAME",
      "YOUR_API",
      "YOUR_API_SECRET",
      "PUBLIC_ID",
      "YOUR_NOTIFICATION_URL",
      "PATH",
    ) ?? 'Unknown platform version';
  } on PlatformException {
    platformVersion = 'Failed to get platform version.';
  }

  if (!mounted) return;

  setState(() {
    _platformVersion = platformVersion;
  });
}

构建UI：

[@override](/user/override)
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Text('Running on: $_platformVersion\n'),
      ),
    ),
  );
}

更多关于Flutter云存储与图像处理插件cloudnary_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼

更多关于Flutter云存储与图像处理插件cloudnary_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

cloudinary_flutter 是一个用于在 Flutter 应用中与 Cloudinary 云存储和图像处理服务进行交互的插件。它允许你上传、管理、转换和优化图像和视频。以下是如何使用 cloudinary_flutter 插件的基本步骤。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 cloudinary_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  cloudinary_flutter: ^2.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

2. 初始化 Cloudinary

在使用 cloudinary_flutter 之前，你需要初始化 Cloudinary 配置。你可以在 main.dart 或其他合适的地方进行初始化：

import 'package:cloudinary_flutter/cloudinary_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 Cloudinary
  Cloudinary.cloudinary = Cloudinary.fromCloudName(cloudName: 'your_cloud_name');

  runApp(MyApp());
}

your_cloud_name 是你在 Cloudinary 控制台中的云名称。

3. 上传文件

你可以使用 Cloudinary 实例来上传文件。以下是一个上传图像的示例：

import 'package:cloudinary_flutter/cloudinary_flutter.dart';
import 'package:flutter/material.dart';
import 'dart:io';

class UploadImage extends StatefulWidget {
  @override
  _UploadImageState createState() => _UploadImageState();
}

class _UploadImageState extends State<UploadImage> {
  File? _imageFile;
  String? _imageUrl;

  Future<void> _pickImage() async {
    // 使用 image_picker 插件选择图像
    final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

  Future<void> _uploadImage() async {
    if (_imageFile == null) return;

    try {
      final response = await Cloudinary.cloudinary.uploadResource(
        CloudinaryResource(
          file: _imageFile!,
          resourceType: CloudinaryResourceType.Image,
          folder: 'flutter_images',  // 上传到指定文件夹
        ),
      );

      setState(() {
        _imageUrl = response.secureUrl;
      });
    } catch (e) {
      print('Error uploading image: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Upload Image to Cloudinary'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _imageFile != null
                ? Image.file(_imageFile!)
                : Text('No image selected.'),
            SizedBox(height: 20),
            _imageUrl != null
                ? Image.network(_imageUrl!)
                : Text('No image uploaded.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            ElevatedButton(
              onPressed: _uploadImage,
              child: Text('Upload Image'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 图像处理

Cloudinary 提供了强大的图像处理功能。你可以通过 URL 参数来对图像进行转换。例如，调整图像大小、裁剪、添加水印等。

String imageUrl = Cloudinary.cloudinary.image('sample.jpg')
    .transform(Transformation()
        .width(300)
        .height(200)
        .crop('fill')
        .quality('auto')
        .effect('sepia'))
    .toString();