html-二维码下方添加任意文字导出为图片

话不多说，直接上代码。

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/qrcode/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-ocean-blue.css">
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
  </head>
  <body>

    <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>

    <script type="text/javascript">

      $(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"
            });
          });
        });

      });

    </script>
  </body>
</html>

好了，记录到这里，持续更新中。

记录问题也是一种修行。

书山有路勤为径，学海无涯苦作舟。

欢迎关注微信公众号：【乐知付加密平台】，您的网络资源可变现

一起学习，一起进步。