Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/426.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何调整二维码的大小?_Javascript_Jquery_Css_Kendo Ui_Qr Code - Fatal编程技术网

Javascript 如何调整二维码的大小?

Javascript 如何调整二维码的大小?,javascript,jquery,css,kendo-ui,qr-code,Javascript,Jquery,Css,Kendo Ui,Qr Code,我当前的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").kendoQR

我当前的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();
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();
我正在使用jQueryUI1.9.2、qrcode.min.js和kendo.all.min.js

对于我以前的JAVASCRIPT,它打印出2个不同的QR代码。 对于我当前的JAVASCRIPT,它不会打印任何内容。 我用css尝试了不同的调整大小的方法,但效果不太好。 如何解决?有什么想法吗?

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

$("#qrcode").kendoQRCode({
    value: "#test",
    size: 300
});
这将生成大小为300px×300px的二维码

根据,要设置生成的二维码的大小,可以使用以下宽度和高度参数:

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
});
在这种情况下,二维码将是400px乘400px

至于问题的第二部分,为什么在你得到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();
});
您正试图使用剑道UI QRCode创建QR码,但传递的参数不正确。是事件侦听器生成了第一个QR码。如果您查看控制台,您可能会在该行代码中看到一些错误

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

根据OP的要求,这是一个功能代码,允许使用以下方式设置二维码的大小:

var qrcode=新的QRCodeqrcode,{宽度:100,高度:100}; $text.onkeyup,函数{ qrcode.makeCode$this.val; }.keyup.focus;
你好谢谢你的回答!对于我当前的JAVASCRIPT代码,我试图将它们组合在一起,因为我在文本框中键入内容时,我的BEFORE代码BEFORE代码中的第一个QR代码可以自动生成QR代码,BEFORE代码中的第二个QR代码用于调整其大小。我试图做一个自动生成,它可以同时调整大小。我能做些什么来组合它们?有什么想法吗?谢谢@Alvaro Montoro您想使用qrcode.js还是Kendo UI qrcode?还是像以前一样两者都使用?我想使用qrcode.js。当我只使用qrcode.js时,我做了一些研究并做了一些更改来调整它的大小,但它不起作用。这就是为什么我在代码中同时使用这两种方法。如果它只能和其中一个一起工作。我希望它是qrcode.js谢谢@Alvaro Montoro添加了一个工作演示,您可以在其中使用qrcode.js指定二维码的宽度和高度