How can I export a QR code image with additional text below it?

[Hanhung]

How can I export a QR code image with additional text below it?

[Zornitsa]

Hello Hanhung,

You could achieve the described behavior by exporting a wrapper, containing the QRCode element and the desired text, using the kendo.drawing.drawDOM method and the kendo.drawing.exportImage method:

<button id="export" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid base">Export</button>
<br><br/>

<div id="wrapper">
      <div id="qrcode"></div>
      <h3>QRCode with text</h3>
</div>

$(document).ready(function () {
        
     $("#qrcode").kendoQRCode({
          value: "https://demos.telerik.com/kendo-ui/qrcode/index",
          size: 120,
          border: {
            color: "#000000",
            width: 3
          }
        });
        
     $("#export").click(function() {
          kendo.drawing.drawDOM($("#wrapper"))
            .then(function(group) {
            return kendo.drawing.exportImage(group, { width: "250px", height: "250px" });
          })
            .done(function(data) {
            kendo.saveAs({
              dataURI: data,
              fileName: "QRCode.png"
            });
          });
        });

});

Below you can find a small Dojo example, demonstrating the suggested approach:

• https://dojo.telerik.com/@Zornitsa/OWIBeCic/4 

Let me know how that works for your scenario.

Regards,
Zornitsa
Progress Telerik