如何在Dart中将用户签名转换为base64编码

Question

我使用syncfusion_flutter_signaturepad包让用户输入他们的签名。现在，我要实现的是将我们API的签名转换为base64格式。这是我的。

GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
.....
final signatureData = await _signaturePadKey.currentState!.toImage();
final image = await signatureData.toByteData(format: ui.ImageByteFormat.png);
if (image != null) {
final imageBytes = image.buffer.asUint8List();
final decodedImage = img.decodeImage(imageBytes);
//String encodedSignature = base64.encode(decodedImage); //decodedImage error The argument type 'Image?' can't be assigned to the parameter type 'List<int>'.
print('Base64 encoded string: $decodedImage');
}

打印结果

Base64 encoded string: Instance of 'Image'

我也试过这种方法，但仍然不起作用。

ui.Image signatureData =
await _signaturePadKey.currentState!.toImage();
ByteData? byteData = await signatureData.toByteData(
format: ui.ImageByteFormat.png);
String imageEncoded =
base64.encode(byteData!.buffer.asUint8List());
print("Encoded: $imageEncoded");

结果是:

Encoded: iVBORw0KGgoAAAANSUhEUgAAAYkAAAKQCAYAAABq7IZzAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAABUGSURBVHic7d3NdRPZvofhf99159KJQCICmwhsRndoEYHlCGxHYDkCRAQWEbh62D2hiAB1BFZHQBGB7oAlHZvuH9gg+YvnWYt1uuljqcRAL3vv2rt+Wy6XywKAf/rzfx76CgB4vEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEA

当我尝试在在线转换器中测试它时，它不工作。

编辑添加mimetype:

String imageEncoded = "data:image/png;base64," +
base64.encode(byteData!.buffer.asUint8List());

但这只是一张空白页，根本没有签名。

结果:

Encoded: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYkAAAKQCAYAAABq7IZzAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAABUGSURBVHic7d3NdRPZvofhf99159KJQCICmwhsRndoEYHlCGxHYDkCRAQWEbh62D2hiAB1BFZHQBGB7oAlHZvuH9gg+YvnWYt1uuljqcRAL3vv2rt+Wy6XywKAf/rzfx76CgB4vEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBIJACIRAKASCQAiEQCgEgkAIhEAoBI

我是否在正确的轨道上试图得到想要的结果?我如何使用syncfusion_flutter_signaturepad颤振包实现我的目标?

Answer 1

您可以使用这些方法作为实用程序将图像转换为base64，反之亦然。

调用imageToByteData(传递一个绘图图像作为参数)，然后调用uint8ListTobase64String(传递之前方法得到的数据)。

无论如何，在注释中你会发现每个方法的用法。我认为这些方法可能是原型，您可以根据自己的需求开始改进!

import 'dart:ui' as UI;
import 'package:image/image.dart' as drawing;
import 'package:flutter/widgets.dart'; 
// Then on your class... where inside are:
// Convert byte-data to base64
static String uint8ListTobase64String(Uint8List? data) =>
data != null ? base64Encode(data) : "";

// Convert base64 string to byte-data as Uint8List
static Uint8List? base64StringToUint8List(String base64String) =>
(base64String.isNotEmpty) ? base64Decode(base64String) : null;
// Widget Image from a base64 string 
static Image imageFromBase64String(String base64String) =>
Image.memory(base64Decode(base64String));
// Passing a "drawing" image as parameter then convert it in a well-encoded image and return byte-data as Uint8List
static Future<Uint8List?> imageToByteData(drawing.Image imageSource) async {
try {
UI.Codec codec = await UI.instantiateImageCodec(drawing.encodePng(imageSource));
UI.FrameInfo frameInfo = await codec.getNextFrame();
ByteData? data = await frameInfo.image.toByteData(format: UI.ImageByteFormat.png);
return data!.buffer.asUint8List();
} catch (e) {
//log(e.toString());
}
return null;
}

请记住这里也使用image.dart包。你可以在这里找到更多信息:https://pub.dev/packages/image。但是，这并不意味着没有它就不能做任何事情。

Answer 2

哦!可能对任何人都有帮助，转换工作得很好，我这里的默认值是我依赖于printdebug值。这个没有显示所有转换后的数据，所以我必须添加一个临时文本字段来显示生成的值。

TextEditingController _textEditingController = TextEditingController();
//under save button
// ......
String imageEncoded = await "data:image/png;base64," +
base64.encode(byteData!.buffer.asUint8List());
_textEditingController.text = imageEncoded;
TextField(
controller: _textEditingController,
//this one holds all the necessary encryped data
),

希望这个可以帮助别人!