theyakka/qr.flutter

I need to show qr code inside my invoice template

Closed this issue · 0 comments

Hi,
I need to embed QRCode inside my invoice template which is designed in HTML.
Now I just have
QrImage(
data: "My Data String",
version: QrVersions.auto,
size: 200.0,)
Just assume I need to embed my QRCode inside an image tag in the HTML structure, something like

<img src="data:image/png;base64,<base64 encoded value of qrimage>">
Example, <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAABvAQMAAADYCwwjAAAABlBMVEX///8nMDZ4PCBxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAmVJREFUOI2NlEGqrDAQRdM4yOxlB+1GhGzLnjwF99FuRTfQ2YKzTAOZKEjq3xv78d+PNnwR4UBZqdy6VUpkF4d3qZyVpP4L+SUG1ci837smqUZ9lRilkQ3BIq6RFzGuTZx9/IAClL+Y2iZ0fpg+4AN5/ShvVDeRVdUfMHTA5kAUGTqFbPefmn8jrsZK8P7cF/Xk9xoRFkWiEPHcje4fgoTH8xuTgTJ+3CR1ekxE9fDjZK+xkwH3m6zkzPhxcHucVL02oT0jNY6iZRPibU+dB8bN9yeEbkDGbxJxUKv7VqfHHuf9jAiD5hkZXDsJxoeW8g6vEpnT+bjavpMIXDWbu+q+Y6klbiLIuXncVCZVbfJUtr/hLIhQIkodHZCVj2jopAengX2nhzM6O4iHetQwqco1EHaAYW4XyMZROvRR6OdWw96RbldnPIIROQoRE5E6O84ywmlTiTULsEwrSw3pZFGtTcYz2wXKO7nsFdtto4MIO5Sv1hJzWmjCyYosksfBxrXo8FUijC2Tpl3FJqDCbAI1J0iViKYkg+SeguC+mw+mQZHB0AwFsoMCa+GX7JzbXm8LSgXy3H/xCM7q7embZsBOiNtSXyOrxXGMh86rfXZ2mD2sCOeUCG/IUXPG2Q/Mhhbr4YS0HMZE8nC9eP1gIP5efcCsW35eHOE42fDwySgoWSA3A5Oj6Vwy7CM3mw3A6QIxKfBGXnpsFvqbjAxo6wnzOiKO2aIHKmOfRt5rs0TqzOBjE5pdtqXCOF8ipo/DJW98cCqB0OqMbKLLmIvEdhrdoow+I2sA5u0x5j2JAGSDXM/vAv8AsVoVEupfI8AAAAAASUVORK5CYII=">

I need to convert QRImage to base64 and embed inside an image tag.
I found a lot of tutorial for generate QR code as widget ,but I coudn't found one which can be embed in a HTML inorder to print.

I just played with some experiment with this code,

Future<Uint8List?> toQrImageData(String text) async {
    try {
      final image = await QrPainter(
        data: 'hi',
        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;
    }
  }
  Color hexToColor(String hexColor) {
    final hexToColor = hexColor.replaceAll('#', '');
    return Color(int.parse('FF$hexToColor', radix: 16));
  }

But don't know how to show this value inside HTML code.
Please check here incase you need to check my complete code.