Flutter图像处理插件flutter_img的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter图像处理插件flutter_img的使用

flutter_img

Pub Open Source Love License

flutter_img 是一个支持SVG代码并能够处理来自资产和网络的SVG、png和jpg图片的Flutter小部件。它还可以处理缓存的照片。

支持的文件格式包括:

  • JPG(来自资产和网络并缓存)
  • PNG(来自资产和网络并缓存)
  • JPEG(来自资产和网络并缓存)
  • SVG(来自资产、网络和代码)

使用

基本示例

Img(
  'https://miro.medium.com/v2/resize:fit:4800/0*bDz2chibrm3B6QZE',
  fit: BoxFit.fill,
  blurHash: 'LGSF|mNH~U?G-oR+Rkt6^%xZD+Ip',
)

安装

环境要求

在开始使用 flutter_img 之前,必须确保已经在机器上安装了 Flutter SDK

添加依赖

pubspec.yaml 文件中添加 flutter_img 依赖:

dependencies:
  flutter_img:

然后运行以下命令安装依赖:

flutter pub add flutter_img

参数

参数名 描述
String src src 是唯一的位置参数,必须传递。它可以接受字符串形式的资产链接、HTTP 图片链接或 SVG 代码。请注意,对于 SVG 代码,不能有换行符。
double? height 如果要显式设置图片高度,可以传递高度值,否则会根据图片高度和屏幕高度自动调整。
double? width 类似于 height 参数,width 参数也可以用于显式值。
BoxShape? shape shape 参数可用于更改图片的形状。
BoxBorder? border border 参数可用于为图片添加边框。
BorderRadiusGeometry? borderRadius 使用 borderRadius 可以为图片添加边框。
EdgeInsetsGeometry? margin 图片的边距。
EdgeInsetsGeometry? padding 图片的内边距。
ColorFilter? colorFilter colorFilter 允许你为图片设置颜色过滤器。
Widget? placeholder placeholder 参数允许你在网络图片完全加载前提供任何小部件作为占位符。此参数仅适用于 png、jpg/jpeg 网络图片。资产图片或 SVG 图片不会受到影响。默认情况下,如果没有提供 placeholder,则会应用 blurHash。默认值为 L5H2EC=PM+yV0g-mq.wG9c010J}I
String? blurHash blurHash 参数也允许你在网络图片完全加载前加载模糊图片。此参数仅适用于 png、jpg/jpeg 网络图片。资产图片或 SVG 图片不会受到影响。
Color? bgColor bgColor 将设置图片的背景色。
Widget? errorWidget errorWidget 参数允许你在网络请求失败或加载网络图片时发生错误时提供任何可见的小部件。
final String? package package 是图片所在包的名称。它仅用于资产图片。

示例

网络图片与模糊图(blurhash)

Img(
  'https://miro.medium.com/v2/resize:fit:4800/0*bDz2chibrm3B6QZE',
  blurHash: 'LGSF|mNH~U?G-oR+Rkt6^%xZD+Ip',
  width: 400,
  height: 200,
)
网络图片与模糊图

网络SVG图片

Img(
  'https://raw.githubusercontent.com/shafi-org/portfolio/master/src/assets/flutter-svgrepo-com.svg',
  width: 300,
  height: 300,
)

SVG代码

Img(
  '<svg width="317px" height="317px" viewBox="-30.5 0 317 317" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"> <defs> <linearGradient x1="3.9517088%" y1="26.9930287%" x2="75.8970734%" y2="52.9192657%" id="linearGradient-1"> <stop stop-color="#000000" offset="0%"></stop> <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop> </linearGradient> </defs> <g> <polygon fill="#47C5FB" points="157.665785 0.000549356223 0.000549356223 157.665785 48.8009614 206.466197 255.267708 0.000549356223"></polygon> <polygon fill="#47C5FB" points="156.567183 145.396793 72.1487107 229.815265 121.132608 279.530905 169.842925 230.820587 255.267818 145.396793"></polygon> <polygon fill="#00569E" points="121.133047 279.531124 158.214592 316.61267 255.267159 316.61267 169.842266 230.820807"></polygon> <polygon fill="#00B5F8" points="71.5995742 230.364072 120.401085 181.562561 169.842046 230.821136 121.132827 279.531454"></polygon> <polygon fill-opacity="0.8" fill="url(#linearGradient-1)" points="121.132827 279.531454 161.692896 266.072227 165.721875 234.941308"></polygon> </g> </svg>',
  width: 300,
  height: 300,
)
网络图片与模糊图

带背景的图片

Img(
  'assets/images/lockup_flutter_horizontal.png',
  bgColor: Colors.red,
  height: 100,
  width: 200,
)

边框和圆角

Img(
  'assets/images/lockup_flutter_horizontal.png',
  borderRadius: BorderRadius.all(Radius.circular(3)),
  border: Border.all(width: 2, color: Colors.red),
  width: 200,
  height: 100,
)

圆形形状

Img(
  'assets/images/flutter-svgrepo-com.svg',
  shape: BoxShape.circle,
  bgColor: Colors.green,
  height: 200,
  width: 200,
  margin: EdgeInsets.all(10),
)

颜色过滤器

Img(
  'assets/images/lockup_flutter_horizontal.png',
  colorFilter: ColorFilter.mode(
    Colors.grey,
    BlendMode.saturation,
  ),
)

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

1 回复

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


当然,关于flutter_img(注意:实际上更常见和知名的插件可能是image包或者处理图像的image_pickercached_network_image等,但假设这里提到的flutter_img是一个专门用于图像处理的Flutter插件),下面是一个关于如何使用该插件进行基本图像处理的代码案例。由于我无法直接访问最新的插件文档或源代码,我将基于假设的API和功能来提供一个示例。

首先,确保你已经在pubspec.yaml文件中添加了flutter_img依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_img: ^x.y.z  # 替换为实际版本号

然后运行flutter pub get来获取依赖。

接下来是一个简单的示例,展示如何使用flutter_img进行图像处理,比如调整图像大小和应用滤镜。请注意,这里的函数和类名是基于假设的,因为实际的flutter_img插件可能有所不同。

import 'package:flutter/material.dart';
import 'package:flutter_img/flutter_img.dart'; // 假设的包导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ImageProcessingScreen(),
    );
  }
}

class ImageProcessingScreen extends StatefulWidget {
  @override
  _ImageProcessingScreenState createState() => _ImageProcessingScreenState();
}

class _ImageProcessingScreenState extends State<ImageProcessingScreen> {
  File? _imageFile;
  File? _processedImageFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Image Processing'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            _imageFile != null
                ? Image.file(_imageFile!)
                : Text('No image selected.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImage,
              child: Text('Pick Image'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _processImage,
              child: Text('Process Image'),
            ),
            _processedImageFile != null
                ? SizedBox(height: 20)
                : Container(),
            _processedImageFile != null
                ? Image.file(_processedImageFile!)
                : Container(),
          ],
        ),
      ),
    );
  }

  Future<void> _pickImage() async {
    // 使用image_picker来选择图像,因为flutter_img可能不包含选择功能
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      setState(() {
        _imageFile = File(pickedFile.path);
      });
    }
  }

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

    // 假设flutter_img提供了ImageProcessor类来处理图像
    final ImageProcessor processor = ImageProcessor();

    // 加载图像
    final Uint8List imageData = await _imageFile!.readAsBytes();
    final Image? originalImage = Image.decodeImage(imageData);

    if (originalImage != null) {
      // 调整图像大小
      final ResizedImage resizedImage = processor.resizeImage(
        originalImage,
        width: 300,
        height: 300,
      );

      // 应用滤镜(例如灰度滤镜)
      final FilteredImage filteredImage = processor.applyFilter(
        resizedImage,
        filterType: FilterType.grayscale,
      );

      // 保存处理后的图像
      final ByteData byteData = Uint8List.fromList(filteredImage.bytes).buffer.asByteData();
      final processedImageFile = File('${(_imageFile!.path).split('/').sublist(0, (_imageFile!.path).split('/').length - 1).join('/')}/processed_image.png');
      await processedImageFile.writeAsBytes(byteData.buffer.asUint8List());

      setState(() {
        _processedImageFile = processedImageFile;
      });
    }
  }
}

// 假设的ImageProcessor类和枚举
class ImageProcessor {
  ResizedImage resizeImage(Image image, int width, int height) {
    // 假设的图像处理逻辑
    // 这里应该返回调整大小后的图像对象
    return ResizedImage(image.bytes); // 仅为示例,实际应包含正确的图像处理逻辑
  }

  FilteredImage applyFilter(ResizedImage image, {required FilterType filterType}) {
    // 假设的滤镜应用逻辑
    // 根据filterType应用不同的滤镜效果
    return FilteredImage(image.bytes); // 仅为示例,实际应包含正确的滤镜应用逻辑
  }
}

class ResizedImage {
  final Uint8List bytes;

  ResizedImage(this.bytes);
}

class FilteredImage {
  final Uint8List bytes;

  FilteredImage(this.bytes);
}

enum FilterType {
  grayscale,
  sepia,
  // 其他滤镜类型...
}

注意

  1. 上面的代码包含了很多假设,因为flutter_img插件的具体API和功能未知。
  2. 实际上,Flutter社区中更常用的图像处理插件可能是image包(用于基本的图像处理操作)结合image_picker(用于选择图像)和cached_network_image(用于网络图像的缓存和显示)。
  3. 如果你正在寻找一个具体的图像处理插件,建议查阅Flutter的pub.dev网站,那里可以找到详细的插件文档和示例代码。
  4. 上面的代码示例中,ImageProcessorResizedImageFilteredImageFilterType都是基于假设创建的,实际使用时需要根据所选插件的API进行调整。
回到顶部