javascript - How to resize QR code? -
my current html code:
<input id="text" type="text"/> <div id="qrcode"></div>
my old javascript code:
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();
my current javascript code:
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();
i'm using jquery ui 1.9.2 , qrcode.min.js , kendo.all.min.js
for old javascript, print out 2 different qrcode. current javascript, doesn't print out anything. have tried different way resize using css doesn't work well. how solve it?any idea?
according kendo ui qrcode documentation, set size of qr code, need use parameter size
in pixels. this:
$("#qrcode").kendoqrcode({ value: "#test", size: 300 });
that generate qr code of size 300px 300px.
and according documentation qrcode.js, set size of resulting qr code can use width
, height
parameters this:
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 });
in case, qr code 400px 400px.
as second part of question, why before got 2 qr codes , don't any, that's because before creating two:
// 1 qr code here using qrcode.js $("#text").on("keyup", function () { qrcode.makecode($(this).val()); }).keyup().focus(); // qr code here using kendo ui qrcode $("#qrcode").kendoqrcode({ value: "#test" });
and not getting any, (and have not tested this, may mistaken) because code wrong:
$("#qrcode").kendoqrcode({ $("#text").on("keyup", function () { qrcode.makecode($(this).val()); }).keyup().focus(); });
you trying create qr code using kendo ui qrcode, parameters passed incorrect (it's event listener generates first qr code). if @ console, you'll see error in line of code.
you should try go original code, , add size
(or width
/height
) parameter specified in documentation.
as requested op, here functional code allow set size of qr code using qrcode.js:
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>
you can see working on jsfiddle: http://jsfiddle.net/ysffjujh/1/. in both cases, need update values of height
, width
generate different size qr code.
Comments
Post a Comment