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

1 Answer 38 Views
QRCode
Hanhung
Top achievements
Rank 1
Hanhung asked on 17 Nov 2023, 04:02 PM
How can I export a QR code image with additional text below it?

1 Answer, 1 is accepted

Sort by
0
Zornitsa
Telerik team
answered on 22 Nov 2023, 11:25 AM

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:

Let me know how that works for your scenario.

Regards,
Zornitsa
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
QRCode
Asked by
Hanhung
Top achievements
Rank 1
Answers by
Zornitsa
Telerik team
Share this question
or