Сохранить изображение подписи от флаттера на устройство - PullRequest
Новая
       26

Сохранить изображение подписи от флаттера на устройство

0 голосов
/ 06 сентября 2018

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

Ты не знаешь, что ты делаешь? Кому пуэдо сторожит? despues necesito obtener esta foto de nuevo, necesito ayuda 

import 'dart:convert';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter_signature_pad/flutter_signature_pad.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ByteData _img = ByteData(0);


  @override
  Widget build(BuildContext context) {
    var sign = Signature(
      color: Colors.red,
      strokeWidth: 5.0,
    );
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(child: sign),
              LimitedBox(
                  maxHeight: 200.0,
                  child: Image.memory(_img.buffer.asUint8List())),
              Padding(
                padding: EdgeInsets.all(25.0),
                child:
                Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                  MaterialButton(
                      color: Colors.green,
                      onPressed: () async {
                        //retrieve image data, do whatever you want with it (send to server, save locally...)
                        var data = await sign
                            .getData()
                            .toByteData(format: ui.ImageByteFormat.png);
                        setState(() {
                          _img = data;
                        });
                        debugPrint("onPressed " +
                            base64.encode(data.buffer.asUint8List()));
                      },
                      child: Text("Save")),
                  MaterialButton(
                      color: Colors.grey,
                      onPressed: () {
                        sign.clear();
                        debugPrint("cleared");
                      },
                      child: Text("Clear")),
                ]),
              )
            ],
          ),
        ) // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

pngBytes = image.toByteData (формат: ui.ImageByteFormat.png)

Теперь вам нужно преобразовать pngBytes в List<int> байт.

, затем с помощью File('$path/filename.png').writeAsBytesSync(pngBytes.buffer.asInt8List()) сохраните ваш холст как png на хранилище

Вот пример 

var pngBytes = await image.toByteData(format: ui.ImageByteFormat.png);
// requesting external storage permission
if(!(await checkPermission())) await requestPermission();

// Use plugin [path_provider] to export image to storage
Directory directory = await getExternalStorageDirectory();
String path = directory.path;
print(path);

// create directory on external storage
await Directory('$path/$directoryName').create(recursive: true);

// write to storage as a filename.png
File('$path/$directoryName/filename.png')
    .writeAsBytesSync(pngBytes.buffer.asInt8List());

для полного примера посетите https://github.com/vemarav/signature

0 голосов
/ 07 сентября 2018

Виджет Signature в примере флаттера просто рисует путь на холсте: 

  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }

Вам нужно найти способ

  • создай свой холст
  • Нарисуйте путь на холсте
  • рендер холста
  • экспорт рендеринга как PNG

Вот конкретные шаги:

  • Создать ui.PictureRecorder.
  • Создайте Canvas с помощью рекордера и Size.
  • Теперь нарисуйте путь на холсте.
  • Завершить запись с помощью recorder.endRecording()
  • Получите объект ui.Image с picture.toImage
  • Получить байты изображения в формате png с помощью image.toByteData(format: ui.ImageByteFormat.png)
  • Сохраните его в файл, передайте его на сервер ...

Шаги описаны в моем ответе здесь (хотя вариант использования отличается): Флаттер, как сохранить (перекодировать) текстовый оверлей на видео

...