HTML 5 Canvas 和二维码

Question

我正在使用此存储库 qrcode 生成 QR 码

这是我的Jquery

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

所以这会获取用户的输入值并在单击按钮时生成 QR 码。但每次我点击 "Generate Button" 它都会在新行中生成一个新的 QR 码，不会替换现有的。

<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);
});

如果不起作用请告诉我

HTML 5 Canvas 和二维码

HTML 5 Canvas and QR Code

jquery

qr-code

html5-canvas