flutter将小部件捕获到图像，然后创建PDF文件到打印机

Question

我的flutter应用程序捕获小部件到图像，然后创建PDF文件到打印机，但它显示了荒谬的结果，如下图所示。

如果你有更好的方法把汉字和qr图像打印到收据上，请告诉我(纸宽75毫米的蓝牙打印机)

在这里与小部件：

RepaintBoundary(
      key: _renderObjectKey,
      child: ListView(
        children: <Widget>[
          Form(
            key: tableNumberFormKey,
            child:
            ListTile(
              title: TextFormField(
                initialValue: "",
                style: TextStyle(fontSize: 48.0),
                textAlign: TextAlign.center,
                maxLength: 4,
                keyboardType: TextInputType.phone,
                onSaved: (val) => inputTableNumber = val.toString(),
                validator: (val) => val.isEmpty ? '' : null,
                decoration: new InputDecoration(
                  labelText: "輸入檯號",
                  hintText: "例如：12",
                ),
              ),
            ),
          ),
          FlatButton(
            textColor: Colors.blueAccent,
            child: Text(
              "列印 QR CODE",
              style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0),
            ),
            color: Colors.transparent,
            onPressed: () {
              _showQRandPrint();
              SystemChannels.textInput.invokeMethod('TextInput.hide');
            },
          ),
          inputTableNumber == ""
              ? ListTile(title: Text(''),)
              : Center(
            child: QrImage(
              data: qrString,
              size: 300.0,
              version: 10,
              backgroundColor: Colors.white,
            ),
          ),

        ],
      ),
    );

这里有创建图像和pdf到打印机的功能。

void _showQRandPrint() {
    final FormState form = tableNumberFormKey.currentState;

    if (form.validate()) {
      form.save();

      _getWidgetImage().then((img) {
        final pdf = new PDFDocument();
        final page = new PDFPage(pdf, pageFormat: PDFPageFormat(75.0, 100.0));
        final g = page.getGraphics();
        final font = new PDFFont(pdf);

        PDFImage image = new PDFImage(
            pdf,
            image: img,
            width: 75,
            height: 100);
        g.drawImage(image, 0.0, 0.0);

        Printing.printPdf(document: pdf);
      });

    }
    else {
      setState(() {
        inputTableNumber = "";
      });
    }
  }

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

结果图片预览：

屏幕上的小部件是：

Answer 1

找到了一个最简单的解决方案。只需使用aspectRatio来调整图像大小，而不是在PdfImage的声明中。获得Uint8List文件后，请执行以下操作：

final image = PdfImage.file(
  pdf.document,
  bytes: list, //Uint8List
);

然后，在pdf文档本身上使用：

pw.AspectRatio(
              aspectRatio: 3/2,
              child: pw.Image(image)
            )

仅此而已。

Answer 2

少数错误:

> < li>

PDFPageFormat(75.0，100.0)是pdf原始尺寸。如果你想要毫米，做:

PDFPageFormat(75.0 * PDFPageFormat.MM, 100.0 * PDFPageFormat.MM)

声明图像时，必须传递像素大小

并且图像不能是png，而是rawRgba数据：

// var img = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
PDFImage image = new PDFImage(
        pdf,
        image: img.buffer.asUint8List(),
        width: img.width,
        height: img.height);

pdf坐标系在页面的左下角有0，0，并且仍然使用pdf单位，因此您必须使用:

g.drawImage(image, 100.0 * PDFPageFormat.MM, 0.0, 75.0* PDFPageFormat.MM);

第三个参数设置宽度。计算高度以保持长宽比。

也许你需要调整它以使图像居中，但是在库页面上有一个例子。