web-dev-qa-db-ja.com

Flutter / Dartで（ディスクから）画像を読み取ってサイズを変更するにはどうすればよいですか

Flutter/Dartで、次の3つの手順を実行するにはどうすればよいですか。

  1. ディスクから画像を読み取り、
  2. 元の寸法（幅と高さ）を読み取り、
  3. サイズを変更します。

注：通常のFlutter Imageウィジェットで最終結果を表示できる必要があります。

説明：画像を保存したくありませんが、実際にメモリ内のサイズを変更したいです。

dartflutterimage-resizing
10
MarcG

image.file コンストラクタを使用して、ディスクからイメージを読み取ることができます。

より多くの機能については、 Image library を使用できます

さまざまなファイル形式の画像をロード、保存、操作する機能を提供するDartライブラリ。

ドキュメントのサンプル 例

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));
}
14
Raouf Rahiche

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/

5
Stephen Samonte Tan

Uiスレッドをブロックし、非常に悪いUXをもたらすため、画像ライブラリを介して画像のサイズを変更するのはあまり良い方法ではありません。 image_picker libにはmaxWidth引数があり、それを設定できるため、これらの書き込みファイルの操作は場合によっては不要になります。

4
korgara

フライトでこれを行う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,
                ),
              ),
            ),
    );
  }
}
2
Andrei Lesnitsky

dart uiライブラリの画像クラスを使用し、intantiateImageCodecのframeInfoを使用して目的の幅と高さの画像オブジェクトを取得し、目的のパスに保存できます。

 import 'Dart:ui' as ui;

        Uint8List m = File(path).readAsBytesSync();
        ui.Image x = await decodeImageFromList(m);
        ByteData bytes = await x.toByteData();
        print('height is ${x.height}'); //height of original image
        print('width is ${x.width}'); //width of oroginal image

        print('array is $m');
        print('original image size is ${bytes.lengthInBytes}');

            ui.instantiateImageCodec(m, targetHeight: 800, targetWidth: 600)
            .then((codec) {
          codec.getNextFrame().then((frameInfo) async {
            ui.Image i = frameInfo.image;
            print('image width is ${i.width}');//height of resized image
            print('image height is ${i.height}');//width of resized image
            ByteData bytes = await i.toByteData();
            File(path).writeAsBytes(bytes.buffer.asUint32List());
            print('resized image size is ${bytes.lengthInBytes}');
          });
        });
1
Sachin Singh

Dart imageパッケージを使用できます： https://pub.dartlang.org/packages/image 。

このパッケージは、サイズ変更、切り取り、回転などのさまざまなサービスを提供します。

このパッケージは機能しますが、残念ながら非常に遅いです。

議論を参照してください： https://github.com/brendan-duncan/image/issues/55

1
Assaf S.

ScaffoldウィジェットでImageウィジェットを使用できますが、

まず、ルートにアセットフォルダーを作成し、画像フォルダーを追加する必要があります。その後、追加し、

    flutter:
      assets:
        - assets/images/

pubspec.yamlファイルへ、その後

new Image(
          image: AssetImage('assets/images/pizzaFont.png'),
          height: 12,
          width:12, ......
   )

幅と高さを使用して、画像のサイズを変更できます。

詳細については、

https://medium.com/@suragch/how-to-include-images-in-your-flutter-app-863889fc0b29

0
Achintha Isuru