如何调整QR码大小？

OneMark 发表于 Dev

OneMark

我当前的HTML代码：

<input id="text" type="text"/>
<div id="qrcode"></div>

我的旧JAVASCRIPT代码：

var qrcode = new QRCode("qrcode");

$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();

$("#qrcode").kendoQRCode({
  value: "#test"
});

$("#qrcode")
   .css({ width: "100px", height: "100px" })
   .data("kendoQRCode").resize();

我当前的JAVASCRIPT代码：

var qrcode = new QRCode("qrcode");

$("#qrcode").kendoQRCode({
  $("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
});

$("#qrcode")
   .css({ width: "100px", height: "100px" })
   .data("kendoQRCode").resize();

我正在使用JQuery UI 1.9.2，qrcode.min.js和kendo.all.min.js

对于我的OLD JAVASCRIPT，它打印出2个不同的qrcode。对于我当前的JAVASCRIPT，它不会打印任何内容。我尝试了使用CSS调整大小的其他方法，但效果不佳。如何解决？有什么想法吗？

阿尔瓦罗·蒙托罗

根据Kendo UI QRCode文档，要设置QR码的大小，您需要使用size以像素为单位的参数。像这样：

$("#qrcode").kendoQRCode({
    value: "#test",
    size: 300
});

这将生成尺寸为300px x 300px的QR码。

根据qrcode.js的文档，要设置生成的QR码的大小，可以使用width和height参数，如下所示：

var qrcode = new QRCode("qrcode");

var qrcode = new QRCode("test", {
    text: "http://jindo.dev.naver.com/collie",
    width: 400,
    height: 400,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

在这种情况下，QR码将为400px x 400px。

至于问题的第二部分，为什么要在获得2个QR码而现在却没有任何QR码，这是因为在创建两个QR码之前：

// One QR Code here using qrcode.js
$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();

// Another QR code here using Kendo UI QRCode
$("#qrcode").kendoQRCode({
  value: "#test"
});

现在您可能什么都没得到（（我还没有测试过，所以我可能会误会），因为此代码是错误的：

$("#qrcode").kendoQRCode({
  $("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
});

您正在尝试使用Kendo UI QRCode创建QR码，但传递的参数不正确（这是一个事件侦听器，它会生成第一个QR码）。如果您查看控制台，您可能会在该行代码中看到一些错误。

您可能应该尝试返回原始代码，并按照文档中的指定添加size（或width/ height）参数。

根据OP的要求，以下是一个功能代码，可以使用qrcode.js设置QR码的大小：

var qrcode = new QRCode("qrcode", { width:100, height:100 });

$("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>

<input id="text" type="text"/>
<div id="qrcode"></div>

您还可以看到它在此JSFiddle上运行：http : //jsfiddle.net/ysffjujh/1/。在这两种情况下，您只需要更新的值height并width生成不同大小的QR码即可。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。