如何调整二维码大小?
How to resize 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").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 调整大小的不同方法,但效果不佳。
如何解决?有什么想法吗?
根据Kendo UI QRCode documentation,设置二维码的大小需要使用参数size
,单位为像素。像这样:
$("#qrcode").kendoQRCode({
value: "#test",
size: 300
});
这将生成一个大小为 300px x 300px 的二维码。
并且根据 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 码将为 400px x 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();
});
您正在尝试使用 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
的值即可生成不同尺寸的二维码。
我当前的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 调整大小的不同方法,但效果不佳。 如何解决?有什么想法吗?
根据Kendo UI QRCode documentation,设置二维码的大小需要使用参数size
,单位为像素。像这样:
$("#qrcode").kendoQRCode({
value: "#test",
size: 300
});
这将生成一个大小为 300px x 300px 的二维码。
并且根据 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 码将为 400px x 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();
});
您正在尝试使用 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
的值即可生成不同尺寸的二维码。