web-dev-qa-db-fra.com

Comment puis-je lire (à partir du disque) et redimensionner une image, dans Flutter / Dart

Dans Flutter/Dart, comment puis-je effectuer les 3 étapes suivantes:

  1. Lire une image à partir du disque,
  2. Lire ses dimensions d'origine (largeur et hauteur),
  3. Redimensionnez-le.

Remarque: je dois être en mesure d'afficher le résultat final avec un widget d'image Flutter normal.

CLARIFICATION: Je ne veux pas enregistrer l'image, mais je veux vraiment la redimensionner en mémoire.

dartflutterimage-resizing
10
MarcG

vous pouvez lire l'image du disque en utilisant le constructeur image.file .

pour plus de fonctionnalités, vous pouvez utiliser la bibliothèque d'images

Une bibliothèque Dart offrant la possibilité de charger, enregistrer et manipuler des images dans une variété de formats de fichiers différents.

exemple de la documentation exemples

Chargez un jpeg, redimensionnez-le et enregistrez-le au format 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

Pour redimensionner une image définie dans pubspec.yaml, utilisez "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
      ),
    ),
  ));
}

référence également comment accéder aux images: https://flutter.io/assets-and-images/

5
Stephen Samonte Tan

Ce n'est pas un très bon moyen de redimensionner l'image via la bibliothèque d'images, car elle bloque le thread ui et apporte une très mauvaise UX. Il y a un argument maxWidth dans image_picker lib, vous pouvez le définir, donc la manipulation de ces fichiers d'écriture sera inutile dans certains cas.

4
korgara

Voici un exemple de widget Thumbnail qui le fait pendant le vol

Il utilise Isolate pour décharger le travail gourmand en ressources CPU sur le thread d'arrière-plan et avoir un thread d'interface utilisateur sans jank

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

vous pouvez utiliser la classe d'image de la bibliothèque Dart ui, obtenir l'objet image avec la largeur et la hauteur souhaitées à l'aide du frameInfo de intantiateImageCodec, puis l'enregistrer dans le chemin souhaité

 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

Vous pouvez utiliser le package Dart image: https://pub.dartlang.org/packages/image .

Le package fournit divers services tels que le redimensionnement, le recadrage et la rotation.

Bien que ce package fonctionne, il est malheureusement très lent.

Voir la discussion: https://github.com/brendan-duncan/image/issues/55

1
Assaf S.

Vous pouvez utiliser le widget Image dans le widget Scaffold,

Tout d'abord, vous devez créer un dossier d'actifs à la racine et ajouter un dossier d'images, après cela,

    flutter:
      assets:
        - assets/images/

dans le fichier pubspec.yaml , après cela

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

Vous pouvez utiliser la largeur et la hauteur pour modifier la taille de l'image.

Pour plus d'informations, suivez,

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

0
Achintha Isuru