HTML 5 Canvas和QR Code

Question

我正在使用这个存储库qrcode来生成二维码

这是我的Jquery

    $(".generatetext").click(function() {
        var x = document.getElementById("textdata").value;
        $('#output').qrcode(x);
    });

因此，这将获取用户的输入值，并在单击按钮时生成二维码。但每次我点击“生成按钮”时，它会在新的一行中生成一个新的二维码，而不是替换现有的二维码。

<canvas width="256" height="256"></canvas>-> on first click
<canvas width="256" height="256"></canvas>-> on second click
<canvas width="256" height="256"></canvas>-> on third click

DEMO -<-生成2或3个二维码

它创建了一个二维码列表。我该如何解决这个问题？我希望每次单击生成按钮时只显示一个二维码

Answer 1

请检查下面的工作解决方案。

​

$(".generatetext").click(function(e) {
    e.preventDefault();
    var x = $("#textdata").val();
    $('#output').html('').qrcode(x);
});

#output{border:1px solid #eee;min-height:200px;width:200px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
  <form class="form-inline">
    <div class="form-group">
      <button class="btn btn-primary generatetext">Generate QR Code</button>
      <input type="text" class="form-control" id="textdata" placeholder="Enter text for QR Code" />
    </div>
  </form>
  <div class="container">
    <div id="output" class="text-center"></div>
  </div>
</div>

​

请检查下面提到的解决方案。

$(".generatetext").click(function() {
    var x = document.getElementById("textdata").value;
     $('#output').html('').qrcode(x);
});

如果它不起作用，请告诉我