如何将QRImage渲染为.png以在pdf文档中使用 [英] How to render QRImage as .png to be used in a pdf document

问题描述

我有以下QR图片，我想将其转换为.png。几年前，有一篇关于stackoverflow的类似文章，但是它使用按钮单击&获取我的应用程序无法提供的图像。这是我绘制QR的代码。

I have the following QR image which I would like to convert to .png . There's a similar post on stackoverflow from a couple years ago however, it uses a button to click & get the image which I cannot have in my app. Here is my code that draws the QR. Any help to convert to .png so I can add to my pdf is appreciated.

Widget getQRImage() {
if (this.showQR) {
  return QrImage(
    data: jsonEncode({
      "name": _name,
      "email": _email,
      "image": imageUrl,
     
    }),
    version: QrVersions.auto,
    size: 200,
    gapless: false,
    embeddedImage: new AssetImage('assets/logo.png'),
    embeddedImageStyle: QrEmbeddedImageStyle(
      size: Size(50, 50),
    ),
    backgroundColor: StateContainer.of(context).curTheme.primary,
    errorStateBuilder: (cxt, err) {
      return Container(
        child: Center(
          child: Text(
            "Uh oh! Something went wrong...",
            textAlign: TextAlign.center,
          ),
        ),
      );
    },
  );
} else {
  return Container();
}

}

编辑：

根据答案，这是我的小部件的外观，但我无法再加载pdf。是因为我的窗口小部件不返回任何东西吗？

this is what my widget looks like based on the answer but I'm unable to load my pdf anymore. Is it wrong because my widget does not return anything?

 pw.Widget _showQR(pw.Context context) {
    pw.Center(
      child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)));

    pw.Center(child: pw.BarcodeWidget(
    data: jsonEncode({
    "name": "_name",
    "email": "_email",
   // "image": "imageUrl",

    }),
    width: 150,
    height: 150,
    barcode: pw.Barcode.qrCode(),
    ),);
    pw.Padding(padding: const pw.EdgeInsets.all(10));
  }

推荐答案

在pdf上绘制二维码您可以简单地使用pw.BarcodeWidget。以下是示例代码：

To draw qr code on pdf you can simply use pw.BarcodeWidget. Here is an example code:

Future<Uint8List> generateDocument() async {
  final pw.Document doc = pw.Document();

  doc.addPage(pw.MultiPage(
      pageFormat: PdfPageFormat.a4,
      crossAxisAlignment: pw.CrossAxisAlignment.start,
      header: (pw.Context context) {
        if (context.pageNumber == 1) {
          return null;
        }
        return pw.Container(
            alignment: pw.Alignment.centerRight,
            margin: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            padding: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            decoration: const pw.BoxDecoration(
                border: pw.BoxBorder(
                    bottom: true, width: 0.5, color: PdfColors.grey)),
            child: pw.Text('Portable Document Format',
                style: pw.Theme.of(context)
                    .defaultTextStyle
                    .copyWith(color: PdfColors.grey)));
      },
      build: (pw.Context context) => <pw.Widget>[
        pw.Center(child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)),),
        pw.Center(child: pw.BarcodeWidget(
          data: jsonEncode({
            "name": "_name",
            "email": "_email",
            "image": "imageUrl",

          }),
          width: 150,
          height: 150,
          barcode: pw.Barcode.qrCode(),
        ),),
        pw.Padding(padding: const pw.EdgeInsets.all(10)),
      ]));

  return doc.save();
}



Future<File> getPdf() async {
    Uint8List uint8list = await generateDocument();
    Directory output = await getTemporaryDirectory();
    File file = File(output.path + "/example.pdf");
    await file.writeAsBytes(uint8list);
    return file;
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<File>(
        future: getPdf(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(
              child: PDFView(
                filePath: snapshot.data.path,
                autoSpacing: false,
                pageFling: false,
              ),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

输出：

要生成pdf，我使用了 pdf 软件包。要显示使用的 flutter_pdfview 的pdf，并获取临时目录 path_provider 包。

To build pdf I have used pdf package. To show pdf used flutter_pdfview and to get the temp directory path_provider package is used.

并且不要忘记导入'package：pdf /widgets.dart'as pw;

这篇关于如何将QRImage渲染为.png以在pdf文档中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！