Flutter云端图像处理插件cloudinary_public的使用

cloudinary_public

此包允许您直接将媒体文件上传到Cloudinary，而无需暴露您的apiKey或secretKey。

Getting started

添加依赖cloudinary_public: ^0.23.1到您的项目：

import 'package:cloudinary_public/cloudinary_public.dart';

final cloudinary = CloudinaryPublic('CLOUD_NAME', 'UPLOAD_PRESET', cache: false);

请参考如何创建一个上传预设。

使用Image Picker插件

var image = await ImagePicker.pickImage(source: ImageSource.camera);

try {
    CloudinaryResponse response = await cloudinary.uploadFile(
        CloudinaryFile.fromFile(image.path, resourceType: CloudinaryResourceType.Image),
    );
    
    print(response.secureUrl);
} on CloudinaryException catch (e) {
  print(e.message);
  print(e.request);
}

使用Multi Image Picker插件

final images = await MultiImagePicker.pickImages(maxImages: 4);

List<CloudinaryResponse> uploadedImages = await cloudinary.multiUpload(
images
    .map(
      (image) => CloudinaryFile.fromFutureByteData(
        image.getByteData(),
        identifier: image.identifier,
      ),
    )
    .toList(),
);

print(uploadedImages[0].secureUrl);

图像变换

// CloudinaryImage
final cloudinaryImage = CloudinaryImage('https://res.cloudinary.com/demo/image/upload/front_face.png');
// or using the image public id
final cloudinaryImage = cloudinary.getImage('front_face');

final String url = cloudinaryImage.transform().width(150).height(150).gravity('face').crop('thumb').generate();
// or using the shortcut
final String url = cloudinaryImage.thumbnail(width: 150, height: 150).generate();

// Chain example
final url = cloudinaryImage.transform()
    .width(150)
    .height(150)
    .gravity('face')
    .crop('thumb')
    .chain()
    .radius(20)
    .chain()
    .effect('sepia')
    .chain()
    .overlay(cloudinary.getImage('cloudinary_icon'))
    .gravity('south_east')
    .x(5)
    .y(5)
    .width(50)
    .opacity(60)
    .effect('brightness:200')
    .chain()
    .angle(10)
    .generate();
// generates
// https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/e_brightness:200,g_south_east,l_cloudinary_icon,o_60,w_50,x_5,y_5/a_10/front_face.png

上传进度

final res = await cloudinary.uploadFile(
  CloudinaryFile.fromFile(
    _pickedFile.path,
    folder: 'hello-folder',
    context: {
      'alt': 'Hello',
      'caption': 'An example image',
    },
  ),
  onProgress: (count, total) {
    setState(() {
      _uploadingPercentage = (count / total) * 100;
    });
  },
);

分块上传

当文件大小超过100兆字节时，使用分块上传。默认情况下，块大小设置为20兆字节，但可以使用chunk_size参数将其设置为低至5兆字节。

final res = await cloudinary.uploadFileInChunks(
  CloudinaryFile.fromFile(
    _pickedFile.path,
    folder: 'hello-folder',
    context: {
      'alt': 'Hello',
      'caption': 'An example upload in chunks',
    },
  ),
  chunkSize: 10000000,
  onProgress: (count, total) {
    setState(() {
      _uploadingPercentage = (count / total) * 100;
    });
  },
);

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中集成cloudinary_public来实现图像选择和上传功能。

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:cloudinary_public/cloudinary_public.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImagePickerExample(),
    );
  }
}

class ImagePickerExample extends StatefulWidget {
  @override
  _ImagePickerExampleState createState() => _ImagePickerExampleState();
}

class _ImagePickerExampleState extends State<ImagePickerExample> {
  final cloudinary = CloudinaryPublic('CLOUD_NAME', 'UPLOAD_PRESET', cache: false);
  double _uploadingPercentage = 0;

  Future<void> _uploadImage() async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      try {
        CloudinaryResponse response = await cloudinary.uploadFile(
          CloudinaryFile.fromFile(pickedFile.path, resourceType: CloudinaryResourceType.Image),
          onProgress: (count, total) {
            setState(() {
              _uploadingPercentage = (count / total) * 100;
            });
          },
        );

        print('Image URL: ${response.secureUrl}');
      } on CloudinaryException catch (e) {
        print('Error uploading image: ${e.message}');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Upload Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _uploadImage,
              child: Text('Pick and Upload Image'),
            ),
            SizedBox(height: 20),
            Text('Uploading... $_uploadingPercentage%'),
          ],
        ),
      ),
    );
  }
}

这个示例应用程序提供了一个按钮，用于从图库中选择图片并将其上传到Cloudinary。它还显示了上传进度。您可以根据需要调整代码以适应不同的需求。