Flutter图片缩放插件fc_native_image_resize的使用

插件简介

fc_native_image_resize 是一个Flutter插件，用于通过原生API调整图片大小。它支持多种平台（iOS、Android、macOS），并能处理常见的图片格式如JPEG和PNG，以及特定平台的原生图片格式（例如iOS/macOS上的HEIF/AVIF）。需要注意的是，从0.9.0版本开始，Windows的支持已被移除，建议在Windows上使用其他方式来处理图片。

支持平台

图片格式支持

• 读取：JPEG, PNG, 平台原生图片格式（例如iOS/macOS上的HEIF/AVIF）
• 写入：JPEG, PNG

注意: 对于Windows平台，由于其对图片格式的支持有限，建议使用image package替代。

使用方法

以下是fc_native_image_resize的基本使用示例，包括如何创建一个简单的Flutter应用程序，选择图片，并对其进行调整大小的操作。

示例代码

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:fc_native_image_resize/fc_native_image_resize.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path/path.dart' as p;
import 'package:tmp_path/tmp_path.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class Task {
  final String name;
  final String srcFile;
  final int width;
  final int height;
  final bool keepAspectRatio;

  String? destFile;
  String? destImgSize;
  String? error;

  Task({
    required this.name,
    required this.srcFile,
    required this.width,
    required this.height,
    required this.keepAspectRatio,
  });

  Future<void> run() async {
    try {
      var plugin = FcNativeImageResize();
      final destFile = tmpPath() + p.extension(srcFile);
      await plugin.resizeFile(
        srcFile: srcFile,
        destFile: destFile,
        width: width,
        height: height,
        keepAspectRatio: keepAspectRatio,
        format: 'jpeg',
      );
      this.destFile = destFile;
      var imageFile = File(destFile);
      var decodedImage = await decodeImageFromList(imageFile.readAsBytesSync());
      destImgSize = 'Decoded size: ${decodedImage.width}x${decodedImage.height}';
    } catch (err) {
      error = err.toString();
    }
  }
}

class _MyAppState extends State<MyApp> {
  String? _srcImage;
  String? _err;
  final ImagePicker _picker = ImagePicker();
  final _tasks = <Task>[];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('图片缩放示例')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('点击"+"按钮选择一张照片'),
                if (_err != null) ...[const SizedBox(height: 8.0), Text(_err!)],
                if (_srcImage != null) ...[
                  const SizedBox(height: 8.0),
                  Text('源图片: $_srcImage'),
                  const SizedBox(height: 8.0),
                  Image(image: FileImage(File(_srcImage!)), width: 200, height: 200),
                ],
                ..._tasks.map((task) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: 8.0),
                      Text('>>> ${task.name}', style: const TextStyle(fontSize: 16.0, fontWeight: FontWeight.bold)),
                      if (task.error != null) ...[
                        const SizedBox(height: 8.0),
                        Text(task.error!, style: const TextStyle(color: Colors.red)),
                      ],
                      if (task.destFile != null) ...[
                        const SizedBox(height: 8.0),
                        Text('目标图片: ${task.destFile}'),
                        const SizedBox(height: 8.0),
                        Text(task.destImgSize ?? ''),
                        const SizedBox(height: 8.0),
                        Image(image: FileImage(File(task.destFile!))),
                      ],
                    ],
                  );
                }),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _pickImage,
          tooltip: '选择图片',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }

  Future<void> _pickImage() async {
    try {
      final XFile? src = await _picker.pickImage(source: ImageSource.gallery);
      if (src == null) return;

      setState(() {
        _srcImage = src.path;
        _err = null;
        _tasks.clear();
      });

      // 添加不同参数的任务到任务列表中
      _addTasks(src.path);

      // 执行所有任务
      await Future.forEach(_tasks, (Task task) async {
        await task.run();
        setState(() {});
      });
    } catch (err) {
      setState(() {
        _err = err.toString();
      });
    }
  }

  void _addTasks(String srcPath) {
    _tasks.addAll([
      Task(name: '调整为300x300 (保持比例)', srcFile: srcPath, width: 300, height: 300, keepAspectRatio: true),
      Task(name: '调整为300x300 (不保持比例)', srcFile: srcPath, width: 300, height: 300, keepAspectRatio: false),
      Task(name: '宽度固定为300', srcFile: srcPath, width: 300, height: -1, keepAspectRatio: true),
      Task(name: '高度固定为300', srcFile: srcPath, width: -1, height: 300, keepAspectRatio: true),
      Task(name: '放大至1000x1000 (不保持比例)', srcFile: srcPath, width: 1000, height: 1000, keepAspectRatio: false),
    ]);
  }
}

此代码段展示了如何使用fc_native_image_resize插件来调整图片大小。用户可以通过浮动按钮选择一张图片，然后应用将根据预定义的任务列表对所选图片执行一系列调整操作，并展示结果。每个任务都包含了不同的调整参数组合，比如是否保持图片的比例等。