如何在Flutter / Dart中读取（从磁盘）和调整图像大小

Question

在Flutter / Dart中，我该如何执行以下3个步骤：

1. 从磁盘读取图像，
2. 阅读其原始尺寸（宽度和高度），
3. 调整大小。

注意：我必须能够使用常规的Flutter Image小部件显示最终结果。

澄清：我不想保存图像，但我确实想在内存中实际调整大小。

Answer 1

你可以使用image.file构造函数从磁盘读取图像。

有关更多功能，您可以使用Image library

Dart库，提供以各种不同文件格式加载，保存和操作图像的功能。

来自文档examples的样本

加载jpeg，调整大小，并将其另存为png

import 'dart:io' as Io;
import 'package:image/image.dart';
void main() {
  // Read a jpeg image from file.
  Image image = decodeImage(new Io.File('test.jpg').readAsBytesSync());

  // Resize the image to a 120x? thumbnail (maintaining the aspect ratio).
  Image thumbnail = copyResize(image, 120);

  // Save the thumbnail as a PNG.
  new Io.File('out/thumbnail-test.png')
        ..writeAsBytesSync(encodePng(thumbnail));
}

Answer 2

要调整pubspec.yaml中定义的图像的大小，请使用“BoxFit”：

@override
Widget build(BuildContext context) {
  return (new Container(
    width: 250.0,
    height: 250.0,
      alignment: Alignment.center,
      decoration: new BoxDecoration(

      image: DecorationImage(
          image: AssetImage('assets/Launcher_Icon.png'),
          fit: BoxFit.fill
      ),
    ),
  ));
}

还参考如何访问图像：https://flutter.io/assets-and-images/

Answer 3

这不是通过图像库调整图片大小的好方法，因为它会阻止ui线程，并且它会带来非常糟糕的UX。在maxWidth lib中有一个image_picker参数，你可以设置它，所以在某些情况下这些写文件操作是不必要的。

Answer 4

这是一个示例Thumbnail小部件，它在飞行中执行此操作

它使用Isolate将CPU密集型工作卸载到后台线程，并使UI线程无边框

import 'dart:io';
import 'dart:isolate';
import 'package:flutter/material.dart';
import 'package:image/image.dart' as IMG;
import 'package:path/path.dart';

class Thumbnail extends StatefulWidget {
  final Size size;
  final File image;

  const Thumbnail({Key key, this.size, this.image}) : super(key: key);
  @override
  _ThumbnailState createState() => _ThumbnailState();
}

class _ThumbnailState extends State<Thumbnail> {
  List<int> imgBytes;
  Isolate isolate;

  @override
  void initState() {
    _asyncInit();

    super.initState();
  }

  static _isolateEntry(dynamic d) async {
    final ReceivePort receivePort = ReceivePort();
    d.send(receivePort.sendPort);

    final config = await receivePort.first;

    print(config);

    final file = File(config['path']);
    final bytes = await file.readAsBytes();

    IMG.Image image = IMG.decodeImage(bytes);
    IMG.Image thumbnail = IMG.copyResize(
      image,
      width: config['size'].width.toInt(),
    );

    d.send(IMG.encodeNamedImage(thumbnail, basename(config['path'])));
  }

  _asyncInit() async {
    final ReceivePort receivePort = ReceivePort();
    isolate = await Isolate.spawn(_isolateEntry, receivePort.sendPort);

    receivePort.listen((dynamic data) {
      if (data is SendPort) {
        if (mounted) {
          data.send({
            'path': widget.image.path,
            'size': widget.size,
          });
        }
      } else {
        if (mounted) {
          setState(() {
            imgBytes = data;
          });
        }
      }
    });
  }

  @override
  void dispose() {
    if (isolate != null) {
      isolate.kill();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: widget.size.height,
      width: widget.size.width,
      child: imgBytes != null
          ? Image.memory(
              imgBytes,
              fit: BoxFit.cover,
            )
          : Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.grey[100], Colors.grey[300]],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
              ),
            ),
    );
  }
}

Answer 5

你可以使用dart image包：https://pub.dartlang.org/packages/image。

该软件包提供各种服务，如调整大小，裁剪和旋转。

虽然这个包确实有效，但不幸的是它很慢。

见讨论：https://github.com/brendan-duncan/image/issues/55