How to resize QR code?

OneMark

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 and kendo.all.min.js

For my OLD JAVASCRIPT, it print out 2 different qrcode. For my current JAVASCRIPT, it doesn't print out anything. I have tried different way to resize it by using css but it doesn't work as well. How to solve it?Any idea?

Alvaro Montoro

According to Kendo UI QRCode documentation, to set the size of the QR code, you need to use the parameter size in pixels. Like this:

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

That will generate a QR code of size 300px by 300px.

And according to the documentation for qrcode.js, to set the size of the resulting QR code you can use the width and height parameters like 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 this case, the QR code will be 400px by 400px.


As for the second part of the question, why before you got 2 QR codes and now you don't get any, that's because before you were creating two:

// 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"
});

And now you are not getting any, probably (and I have not tested this, so I may be mistaken) because this code is wrong:

$("#qrcode").kendoQRCode({
  $("#text").on("keyup", function () {
qrcode.makeCode($(this).val());
}).keyup().focus();
});

You are trying to create a QR code using Kendo UI QRCode, but the parameters passed are incorrect (it's an event listener that generates the first QR code). If you look at the console, you'll probably see some error in that line of code.

You should probably try to go back to the original code, and add the size (or width/height) parameter as specified in the documentation.


As requested by OP, here is a functional code that will allow to set the size of the 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 also see it working on this JSFiddle: http://jsfiddle.net/ysffjujh/1/. In both cases, you just need to update the values of height and width to generate a different size QR Code.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to resize QR code?

From Dev

How accurate is QR code scanning?

From Dev

How to display a QR code in phonegap

From Dev

How to limit ZBar QR code reader to only detect QR codes?

From Dev

How to get a QR reader to recognize your generated QR Code?

From Dev

how to install qr code library in php

From Dev

How to create QR code in Axapta 2009

From Dev

How to create and show Qr Code in Android App

From Dev

How do create QR code with logo in the middle

From Dev

How do detect a QR code pattern in an image?

From Dev

How to read QR code in google glass android?

From Dev

How to generate QR code with logo inside it?

From Dev

How to make a UWP mobile QR code reader?

From Dev

How to create and show Qr Code in Android App

From Dev

How do create QR code with logo in the middle

From Dev

How to generate QR code in PHP with custom fields

From Dev

How to create a tab delimited string for QR code?

From Dev

How does a dynamic QR code work?

From Dev

How to save vCard from QR code in Swift

From Dev

How to generate a QR code for paypal payment?

From Dev

How to change the bar code in our ZPL code into a QR code?

From Dev

Android I use Zxing Qr code, how to scan local Qr code image?

From Dev

How to ImageIcon Array List resize in following code

From Dev

How can I resize an UIView by code?

From Java

How to decode a QR-code image in (preferably pure) Python?

From Dev

How to scan a QR code in a Windows Phone 8.1 App? (not silverlight app)?

From Dev

Manually decoding a QR code - how to properly extract length and encoding?

From Dev

How do I generate a QR code for a Bitcoin address with amount?

From Dev

How to draw a QR code with Qt in native C/C++

Related Related

HotTag

Archive