Флаттер: создание изображения путем наложения других изображений

Question

Я хочу создать приложение для создания логотипов с использованием Flutter, в моем проекте есть графические ресурсы, пользователь может объединить эти ресурсы для создания логотипа.

Я знаю, что могу накладывать изображения с помощью виджета стека, но как преобразовать эти наложенные виджеты в реальное изображение в формате png или jpeg, чтобы пользователь мог сохранить свой телефон.

Answer 1

Попробуйте следующий код, он сделает снимок экрана и сохранит файл во внутреннем хранилище.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  # package for saving the screenshot
  image_picker_saver: ^0.1.0

main.dart

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:image_picker_saver/image_picker_saver.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static GlobalKey screenshotKey = new GlobalKey();     // key
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RepaintBoundary(
        key: screenshotKey,
        child: Container(
          width: double.infinity,
          color: Colors.white,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                RaisedButton(
                  child: Text("Take a screenshot"),
                  onPressed: _takeScreenShot,
                )
              ],
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void _takeScreenShot() async {
    RenderRepaintBoundary boundary =
        screenshotKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    var filePath = await ImagePickerSaver.saveFile(fileData: pngBytes);
    print(filePath);
  }
}

Answer 2

Вы можете использовать RepaintBoundary для этого.Проверьте эту ссылку , что касается сохранения изображения на диск, вам нужно обработать взятые байты, вы можете использовать пакет изображений (сделан в основном для дротиков, но на 100% совместим с флаттером).

Как видите, код очень прост, когда вы конвертируете байты между Flutter Image и image: image

new File('thumbnail.png').writeAsBytesSync(encodePng(convertedBytes));

Вы можете проверить этот код прототипа Я сделалвчера для аналогичного вопроса о чтении пикселей изображения во Flutter.

После того, как вы получили байты изображения, вы можете передать его в файл на диске (используя path_provider или аналогичный, чтобы найтиПуть к файлу в каждой ОС) или загрузите его куда-нибудь, как в первой статье.

Удачи в реализации!