jeromeetienne / jquery-qrcode Goto Github PK

qrcode generation standalone (doesn't depend on external services)

Home Page: http://blog.jetienne.com/blog/2011/04/07/jquery-qrcode/

License: MIT License

Makefile 3.10% HTML 12.87% JavaScript 84.03%

jquery-qrcode's Introduction

jquery.qrcode.js

jquery.qrcode.js is jquery plugin for a pure browser qrcode generation. It allow you to easily add qrcode to your webpages. It is standalone, less than 4k after minify+gzip, no image download. It doesnt rely on external services which go on and off, or add latency while loading. It is based on a library which build qrcode in various language. jquery.qrcode.js wraps it to make it easy to include in your own code.

Show, don't tell, here is a example

How to Use It

Let me walk you thru it. First include it in your webpage with the usual script tag

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

Then create a DOM element which gonna contains the generated qrcode image. Lets say a div

<div id="qrcode"></div>

Then you add the qrcode in this container by

jquery('#qrcode').qrcode("this plugin is great");

This is it. see it live.

You can set the height and width of the generated qrcode:

jquery('#qrcode').qrcode({width: 64,height: 64,text: "size doesn't matter"});

Conclusion

jquery.qrcode.js is available on github here under MIT license. If you hit bugs, fill issues on github. Feel free to fork, modify and have fun with it :)

jquery-qrcode's People

Contributors

Stargazers

Watchers

Forkers

dimitrisch chrisdew imbcmdth sigkate christopherdebeer greco thatleeguy matthieumarechal sequoiar bryjeep saeidmh83 apnerve squidjam huncent kernity paveltytyuk poorcoder tttp benjp gorbster wernerharing billortell hgirish kghost xgithub ctemplin dhming mooreed kaiquewdev ppcano xiufan monado roypeled manuchap jjgleim bradbeattie iamb55 sanyaade-webdevkits boxofsnoo nours312 sachanand jasteele12 bahaddinyasar thehack bengm hzucmj goeko bricedurand ryanhanwu justsml plusx xc0der waterqiang jgoldberg arr4n ccoenen sangam12345 webeau yashilanka leandrojf sparr azamara jasonmw derekyle rahulcn aoj minusfive wdshin dami0895 cartercole shiti moyaalexander darklee asdi richard132 vicapow freedomw1987 aduan morningbzy fgbarone lanhed atrl psramkumar element24 timwhite47 jscr ivanionut mbuckbee mayureshgoyal altima tim-zhang nonintanon albertoa weger fessalian xyzyx101 condescarta mkeefe mike44433 fhefh2009

jquery-qrcode's Issues

Right and bottom white border

Every image I save from canvas have a 1px right and bottom border, even in the original samples.

table 模式当 size=100100时,我的浏览器会变成10087

bug

如题，在用浮点计算值作为with和height属性时，貌似会出现异常的四舍五入。

把每个tr和td的with和height去掉，就好了

Add Bower Support

I'm using this on a small project and it'd be pretty useful if it was available as a bower dependency.

Project description (in GitHub)

s/dont depends/doesn't depend/ ;-)

how to get toDataURL of generated qr

I want to use the generated QR code other places in my project. Is it possible to get the image from the canvas using toDataURL? I know generally how to use toDataURL, but the problem is the canvas generated in your script has no id so I don't know how to reference it...

Example/Support to Read the QR Code

Does it provide any support to read the QR code and retrieve the actual values.? If yes, please provide example.

Overflow in "text" variable?

In the example below, the generated QR code image shrinks in width and height by approximately half whenever the length of the "text" exceeds 32 characters. (For example, if you add "/people" to the end of the URL in the example below.) My guess is that this exceeds the length of some array inside jquery.qrcode.js. Here's the example:

<!DOCTYPE html>
<head>
        <script src="jquery-1.10.2.js"></script>
        <script src="jquery.qrcode.js"></script>
</head>
<body>
<div id="qr1" style="width: 100px; height: 100px; border: 1px solid black;"></div>
<script language="javascript">
$("#qr1").qrcode({
        render: 'div',
        size: 50,
        color: '#000000',
        text: 'http://www.phys.virginia.edu'
});
</script>
</body>
</html>

length of string seems to be an issue in general

e.g. "TODO make a nice looking pure client qrcode generator even allow download of the image" results in an error: "code length overflow. (700>288)". any hints and ideas on how to fix this would be great.

Canvas image into png image in IE8

I have tried to convert the canvas image into png image .It works fine in all major browsers. In IE8 i have used excanvas.js to support canvas image but there we cant able to convert canvas to png. I came to know that excanvas not support toDataURL(), toBlob(). How to fix this

Character limit on the codes

I was tinkering with plugin and noticed that after a certain amount of characters, the QR code was no longer being output to the screen. Is there a limit that I was not aware of? I definitely want to utilize the plugin on a resume page I have set up and have it link to a .vcf contact card. It just kept breaking every time I tried. Had to resort to an image for the time being.

,

Problems with IE8 and IE7

I’m trying generate a QR code with this text "http://www.demo.php?action=Connect&ids=12874563765678987654567898765456&cry_protocols=86958690569&cryk=&uuuuuu=8796879687968796879687968796879687&ppppp=8796879687968796879687968796879687&ccc=8796879687968796879687968796879687” but in IE8 appear this error “There are a problems with a script in this web”. I’m put or doing anything wrong???

Because if put less than 105 characters works well in IE8.

Thanks and best regards.

ErrorCorrectLevel can not be changed

When I want to use another errorlevel than 'H', it does not accept this parameter. Using ErrorCorrectLevel : "Q" does not change the errorlevel in the QR result, it still shows the default 'H' errorlevel. Parameters 'width', 'height' and 'foreground' are excepted, 'errorcorrectlevel' not.

My example:
jQuery('#qrTest').qrcode({
render : "table",
errorcorrectlevel : "M",
width : 200,
height : 200,
foreground : "#FF0000",
text : "Hello World"
});

IE requires "table"; others require "canvas"

The issue with IE is a problem for me. When I change the "render" attribute to "table", the script works on IE, but not on any other browser -- I just get a block of horizontal lines. Is there a way to enable table mode for just IE and otherwise use the canvas mode? I've tried using "conditional comments" but have been unsuccessful getting them to work. Do you have any suggestions? I would not like to choose between IE and everything else. About 1/3 of my audience uses IE, and 2/3 uses other browsers.

Why zxing.js can not parse the qrcode

I generate the qrcode image use this lib, but can not parse it use zxing.js, you can test it use a chrome pluginchrome-qrcode.

can parse use qrcode scan app.

Anti-Aliasing

So if you select a height/width which is not a good multiple of the QR code size then you get artifacts on the edges of some of the pixels. Some decoders cannot deal with this and fail to decode the message. One solution would be to round the given size to a good multiple.

Canvas/table id

Hi,

I realize it's easy enough to patch or modify by other means, but it would be nice if the canvas/table id was settable from the command (ie, container_id : 'some text')

The id is nice to have since it makes the object produced by qrcode more easily addressable from secondary or post-processing functions. For instance, I'm pushing the output through a canvas-to-png function right after the QRcode is generated, and the processor wants to access the canvas by id. Needless to say, having the id in place saves a teeny bit of "footwork".

the mod for the canvas is quite simple and...
(starting on line 26 current version...)

26 // create canvas element
27 var canvas = document.createElement('canvas');
28 canvas.width = options.width;
29 canvas.height = options.height;
*30 >>> canvas.id = "canvas";

and the table mod goes just below in the section that creates the table wrapper.

not support chinese

QR Code Logos/Styling/Hacking

Have you considered the possibility of adding support for custom bitpatterns/logos/etc in the centre of the QR codes and/or altering the pixel shape as per these articles?

http://beautifulpixels.blogspot.com/2010/08/qr-code-hacks-modifying-and-altering.html
http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/

AFAIK there is (currently) no automated way to do this, so why not be the first/only by enhancing your plugin? Could start a fun new trend and make a name for yourself in the process... ;)

not able to print using jquery

API suggestion

Why not optionally put the data in the div, like so?:

<div id="qrcode">This is my data.</div>

This would also fail gracefully and just display the data. The existing call for using the library would override this method.

Canvas renderer: Thin lines between blocks

Hi there,
great plugin! But is there a way to fix the thin white lines between the blocks when using the canvas renderer? It works anyway, but just doesn't look that nice...
Thanks,
Jakob

[jquery.qrcode.min.js] QRErrorCorrectLevel symbol is not available.

Hi,
Thank you for this useful tool.

'jquery.qrcode.min.js' does not contain 'QRErrorCorrectLevel' symbol.
I think that 'closurec' tool renames its name.
But calling '.qrcode()' with 'correctLevel' option require it.

Example: (this is not work)
<script src="jquery.qrcode.min.js">
<div id="qrcode"></div>
<script>
jQuery('#qrcode').qrcode({text : 'TEXT', correctLevel : QRErrorCorrectLevel.L});
</script>

src/qrcode.js:
//---------------------------------------------------------------------
// QRErrorCorrectLevel
//---------------------------------------------------------------------

var QRErrorCorrectLevel = {
L : 1,
M : 0,
Q : 3,
H : 2
};

jquery.qrcode.min.js:
v={L:1,M:0,Q:3,H:2}

Cannot display the QRCode in FireFox

this is the Html :

        <div id="wePay" class="tab-pane fade in active">
            <p class="err-text"></p>
            <dl class="dl-horizontal content-area">
                <dt>
                    <img src="/static/img/WePayLogo.png" style="widows: 100px;height: 30px;"
                         alt="微信支付">
                </dt>
                <dd>
                    <div id="wePay-qrcode"></div>
                    <img src="/static/img/WePayDesc.png" style="width: 100px;height: 30px;">
                </dd>
            </dl>
        </div>

and the js code is below :

function getWechatPayUrl() {
    $.ajax({
        url: "/payments/wechat?orderId=" + orderId,
        type: "GET",
        success: function (res) {
            if (res.code == 200) {
                $("#wePay-qrcode").qrcode({width: 64,height: 64,text: res.data});
                $(".content-area").show();
            } else {
                $(".err-text").text(res.msg);
                $(".content-area").hide();
            }
        }
    })
}

the FireBug show that Ajax request is success ,and the result return like that :

{"code":200,"msg":"操作成功","timestamp":"2016-01-19 15:22:05","data":"weixin://wxpay/bizpayurl?pr\u003dx0p6QsZ"
}

but , the QRCode is not shown.

Uncaught ReferenceError: QRErrorCorrectLevel is not defined

i've followed the directions as mentioned in the readme, but am getting this issue

jQuery.qrcode.js:15Uncaught ReferenceError: QRErrorCorrectLevel is not defined, on line 15

Release/Tag new version (and use semantic versioning)

I'm currently maintaining a fork just so I can more frequently version this codebase. There hasn't been a tag/release in about 6 months. Tagging every so often (after big pull requests, features, etc...) would be a big help for using this as a dependency. So please make v1.1 or...

I also tend to prefer semantic versioning (semver) for versioning projects. This isn't a huge deal, but just thought I'd mention it. If you were to fall in line with semver, your new version would probably be v1.0.1 unless you feel that the updates that have been made since v1.0 are significant enough to warrant bumping to v1.1.0. It's your call (obviously).

TL;DR Push out a new release/version please. Thanks for the awesome lib!

Add version & tag

@jeromeetienne, is it possible to add the version and appropriate tag to your repository? It is necessary to add jquery-qrcode to CDN (see http://git.io/M2eOqA).

New release

Hello!

I would like to add this package to the Fedora Project. It seems there have been some contributions since the last release in 2013 that would be beneficial to include. Would you care to make a release?

printing generated qr codes

hi there,
i had to send the generated qr codes to printer, in FF and Chrome, i some how managed to send prints to printer, how ever while in IE, as it renders table, i am unable to send it to printer, may i know, if there is any other way to do it, or may be the work around to it.

Saad

how to use this with codeigniter?

Broken: uses a non-existent function

I get this exception originating from the plugin when I try using it. Was this written for an old version of jquery, or with an undeclared dependency?

jQuery.Deferred exception: this.each is not a function r.fn.qrcode@http://localhost:8000/static/js/jquery-qrcode.min.js:26:69
shortcut_info.init/populateQR@http://localhost:8000/static/js/info.js:53:6
@http://localhost:8000/potato/?info:36:7
g/</j@http://localhost:8000/static/js/jquery.js:2:29946
g/</k<@http://localhost:8000/static/js/jquery.js:2:30262
 undefined

Support bbpress login widget

Make more better for bbpress login widget

jquer_qrcode problem in canvas

The code to print QR code in canvas as given in example is not working.I am experiencing the error "object doesn't support this property",where as if we write render:table,it works fine.but if i put window.print,qr code doesn't get printed.

你好

The table render mode doesn't displays properly

When use the table render mode (checked with the demo), the "QR image" is not properly display.
The behaviour is different depends on the browser:

On firefox (16.0) displays properly
On chrome (22.0.1229.79) the table has a real height of 260px. The table displays the QR resize to that height.
On Opera (10.60 and 12) the table has a real height of 256px but the table displays one last row of 30px heigh cells with the same image as the previous row.

need to generate for min of 256 character

this plugin is really great but due some size limitations i m not able to effectively use it. please help.

I need to use qrcode generator which supports atleast 256 characters.
As suggested i tried to increase the typeNumber.

When i change typeNumber to 10 i am allowed only 122 characters. is there any help so that i can get for 256 characters??

if i use more than 10 for typeNumber i am get "undefined" from getRsBlockTable() function and giving me error "
bad rs block @ typeNumber:20/errorCorrectLevel:2"

TypeError: el.appendChild is not a function in firefox

save qrcode as img file in IE

hello,

I am a rookie in javasript and jquery. I want to use this jquery-qrcode to produce qrcode, it works.
But when I want to save as img in IE, it failed.

I wanted to know if there's a way to work out this problem. Thank U.

utf-8 support?

can do like this ? or how can do like this

jQuery('#qrcode').qrcode({
encoding:"UTF-8",
render : "table",
text: "**"

});

Bugs!!

When I use below codes to generate the qrcode, the generated qrcode can not be decoded.

function utf16to8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
    }
    return out;
}

var text = "http://jiceshi.heimalanshi.com/test?id=9";
var op={};
op.width=200;
op.height=200;
op.text=utf16to8(text);
op.render = "table";
jQuery('#qrcode').qrcode(op);

The generated qrcode is shown as below:

But when I remove op.render = "table";, the generated qrcode can be decoded.

qrcode encode error

When typeNumber is 15 and correctLevel is QRErrorCorrectLevel.H the qrcode encode is wrong, see the screenshot:

URL with question mark don't work

Hi, thank you for this great tool.
I have tried to generate QR codes with URLs that include a question mark (?) in it. It doesn't work. (Possibly the "+" sign in the example below would cause in itself the same problem)

Example:

this doesn't work (no QR code generated):

  <div id='qrcode'></div>
  <script>
  jQuery('#qrcode').qrcode('http://maps.google.com/?q=1697+Broadway,+New+York,+NY');
  </script>

whereas this works:

  <div id='qrcode'></div>
  <script>
  jQuery('#qrcode').qrcode('http://maps.google.com');
  </script>

Any advice to resolve this? Thanks.

QR Code generated size

Not sure if this is an "issue" per say, but I was curious if it was possible at all to control the generated size of the QR square. I am planning to use it for a resume page but would like something a little smaller if possible.

port /index.html to twitter bootstrap

thus remove the dependancy on pandoc

How to print it out through a browser?

Two-dimensional code can be saved into a picture? Because the two-dimensional code display can not be printed out through the browser print function.

function print() { window.print(); }

When set `render: 'table'`, it can not work.

$code.qrcode({
    width   : 175
    ,height:175
    ,render : 'table'
    ,text   : 'http://pr.oneplus.cn/blog/2015/pete-whats-never-settle'
});

Hi, this is a bug. The qr code cannot access. But, if we take out width and height, it is good. when set render: 'canvas', it also good.

I guess the size algorithm has a problem, when the render is table.

how to add image to qrcode

Get base64 buffer only

hi,

I am aware a newer version exist but in my case it does not work in Chrome 41. This plugin works just fine.

I wanted to know if its possible to just return the buffer only instead of writing it to a element.

Issue with multiple QR codes on same page

I have noticed when your script creates the qr code it is generated as follows

div
canvas
img style(display:block...)
div

When I have two qr codes on the screen one of the codes gets generated similarly but the img tag is styled (display:none).

For my purposes I am trying to use the img tags generated.

Do you have any issues managing multiple QR codes on a single page, if so please tell me what the limitations are if possible...?

Thanks