如何调整QR码的大小？

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，QR码。 min.js和kendo.all.min.js

对于我的OLD JAVASCRIPT，它打印出2 d不同的qrcode。 对于我目前的JAVASCRIPT，它不会打印出任何东西。 我已经尝试过不同的方式来调整它使用CSS，但它不工作。 如何解决它？任何想法？

Answer 1

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

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

这将生成300px的300px大小的QR码。

而且根据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像素由400像素。

---

至于这个问题，为什么你有2个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(); 
}); 

您正试图创建一个使用剑道UI QR码QR码，但参数传递是inco rrect（这是一个生成第一个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码。