Question

我想使用Flutter制作徽标制作器应用，我的项目中有图片素材资源，用户可以将这些素材资源组合在一起制作徽标。

我知道我可以使用Stack Widget叠加图像，但是如何将叠加的Widget转换为png或jpeg格式的真实图像，以便用户保存手机。

Answer 1

您可以为此使用RepaintBoundary。选中this link，关于将图像保存到磁盘，您需要处理占用的字节，可以使用image package（主要用于飞镖，但100％与flutter兼容）。

如您所见，在Flutter Image和image：image之间转换字节后，代码非常简单

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

您可以检查我昨天提出的this prototype code，以了解有关在Flutter中读取图像像素的类似问题。

一旦获得了图像字节，就可以将其流式传输到磁盘中的文件（使用path_provider或类似方法在每个操作系统中查找文件的路径），或将其上载到第一篇文章中。

祝您实施顺利！

Answer 2

尝试以下代码，获取屏幕截图并将文件保存在内部存储器中。

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);
  }
}

颤动：通过重叠其他图像来制作图像

2 个答案: