Flutter qrImage 转换为图片

Question

我正在使用 qr_flutter 创建 QrImage。没关系，但我想将 QrImage 转换为图像以创建 PDF 文件以在打印机上打印。请帮忙！

QrImage(
  data: qrString,
  size: 300.0,
  version: 10,
  backgroundColor: Colors.white,
),

Answer 1

使用带键的 RepaintBoundary 小部件将小部件导出为 b64 字符串，然后您可以将其导出为图像。

示例：

Future<Uint8List> _getWidgetImage() async {
 try {
   RenderRepaintBoundary boundary =
      _renderObjectKey.currentContext.findRenderObject();
   ui.Image image = await boundary.toImage(pixelRatio: 3.0);
   ByteData byteData =
      await image.toByteData(format: ui.ImageByteFormat.png);
   var pngBytes = byteData.buffer.asUint8List();
   var bs64 = base64Encode(pngBytes);
   debugPrint(bs64.length.toString());
   return pngBytes;
 } catch (exception) {}

}

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: [
          RepaintBoundary(
            key: _renderObjectKey,
            child: QrImage(
            data: "some text",
            size: 300.0,
            version: 10,
            backgroundColor: Colors.white,
         ),
       ),
       RaisedButton(onPressed: () {
         _getWidgetImage();
       })
     ]));

}

Answer 2

Future<Uint8List> toQrImageData(String text) async {
  try {
    final image = await QrPainter(
      data: text,
      version: QrVersions.auto,
      gapless: false,
      color: hexToColor('#000000'),
      emptyColor: hexToColor('#ffffff'),
    ).toImage(300);
    final a = await image.toByteData(format: ImageByteFormat.png);
    return a.buffer.asUint8List();
  } catch (e) {
    throw e;
  }
}

Answer 3

一个更更新的输入答案，增加了责任分离和空安全，扩展将是：

  Future<Uint8List> createImageFromRenderKey({GlobalKey<State<StatefulWidget>>? renderKey}) async {
    try {
      final RenderRepaintBoundary boundary = renderKey?.currentContext?.findRenderObject()! as RenderRepaintBoundary;
      final ui.Image image = await boundary.toImage(pixelRatio: 3);
      final ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);

      return byteData!.buffer.asUint8List();
    } catch(_) {
      rethrow;
    }
  }

这个想法基于相同的原则：使用全局渲染键来创建 ByteData，从而允许您创建 Uint8List 缓冲区。但是，新版本的 Flutter 将边界类型更改为 RenderyObject? 而不是 RenderRepaintBoundary.

rethrow 是绕过 limitation/small 错误的（脏）方法，其中 RepaintBoundary 可能被用在 UI 中以重新绘制边界（暴露为 boundary.debugNeedsPaint)，因此它可能会引发未处理的异常或创建低质量的图像缓冲区。因此，如果正在使用视图，我会重新抛出该方法。有关堆栈跟踪的更多详细信息：https://github.com/theyakka/qr.flutter/issues/112

Flutter qrImage 转换为图片

Flutter qrImage convert to Image

qr-code

image

dart

flutter