javascript - 如何调整二维码大小？

Question

我当前的 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

对于我的旧 JAVASCRIPT，它打印出 2 个不同的二维码。对于我当前的 JAVASCRIPT，它不会打印出任何内容。我尝试过使用 css 调整大小的不同方法，但效果不佳。如何解决？有什么想法吗？

Answer 1

根据 Kendo UI QRCode documentation , 要设置二维码的大小，需要使用参数size 以像素为单位。像这样:

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

这将生成一个大小为 300 像素 x 300 像素的二维码。

并根据documentation for 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 码将为 400 像素 x 400 像素。

---

关于问题的第二部分，为什么之前有2个二维码，现在没有了，那是因为之前你在创建两个:

// 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 创建二维码，但传递的参数不正确(它是生成第一个二维码的事件监听器)。如果您查看控制台，您可能会在那行代码中看到一些错误。

您可能应该尝试回到原始代码，并添加 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 的值即可生成不同尺寸的二维码。