9 ms·

Pure browser qrcode generation as simple as $('#contain').qrcode('foobar')

146 points by jerome_etienne 16y ago

hoping to make qrcode easier to use

lwhi 16y ago
In the past I've used the google charts API to generate QR codes. Is there a benefit to generating a qrcode on the client side?
- _pius 16y ago
  From the OP: It doesn't rely on external services which go on and off, or add latency while loading.
  - lwhi 16y ago
    That's true - but the charts API works without JS, and is inserted into the page as an image which could be seen as equally advantageous. Still - it's great that this plugin exists.
- zefhous 16y ago
  I can see it being used with wkhtmltopdf (uses webkit to generate PDFs) so invoice generation or something doesn't require an external request.
  - lwhi 16y ago
    That looks like a nice project, thx.
- robotron 16y ago
  I touched on this in another comment and zefhous is pretty much on the money. Where I'm at we have a web-based interface for our warehouse, inventory and CSR systems. QR codes are all over the place and with our web UI's we use Charts for QR generation. This causes a bottle-neck when things are moving really fast on the floor. I haven't looked at this yet but it sounds like something we need.
- alunny 16y ago
  The Google charts API doesn't provide an SSL interface - if you use it on a page served over https, you'll get a mixed content warning. [EDIT] I was mistaken, see andrewjshults's reply.
  - andrewjshults 16y ago
    The google charts link at the top of the thread (http://news.ycombinator.com/item?id=2419367 http://news.ycombinator.com/item?id=2419367) https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3... is served via HTTPS. Their docs don't officially acknowledge supporting HTTPS but it looks like people have been doing it since 2007 (at least - http://groups.google.com/group/google-chart-api/browse_thread/thread/95c463d88cf3cfe4 http://groups.google.com/group/google-chart-api/browse_threa... )
    - alunny 16y ago
      Interesting - looks like chart.googleapis.com works over HTTPS: https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3... but chart.apis.google.com (which Google formerly used) does not: https://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.apis.google.com/chart?chs=150x150&cht=qr&#... Turns out I was looking at some outdated docs. Thanks!
- yonran 16y ago
  I had installed one of the numerous QR Code extensions for Chrome (press the button and it generates a QR code of the URL to continue reading on the phone). Unfortunately, I always wanted to send the URL to my phone _after_ losing wifi contact, so the image would fail to load. I was so annoyed that I downloaded the ZXing source and learned GWT so I could compile the QREncoder to Javascript for myself. This looks like a neater and more lightweight solution.
chopsueyar 16y ago
What specific examples do you guys use QR codes for on websites? How well does it work (not in terms of recognition, but traffic generation, etc)? I am looking for a use, but always come up with easier solutions that do not involved barcodes and image recognition on smartphones.
- robotron 16y ago
  I use it for our web-based warehouse/inventory system.
  - chopsueyar 16y ago
    Can you go into more details on this? I spec'ed out a WMS, and had a prototype, but I am very curious to see what you have come up with.
- jerome_etienne 16y ago
  qr code is about easily passing data to your smart phone. The most common application is give url to your phone. android 2.2 got a feature to push links from chrome to android phone. with qrcode, you can do it from any browser to any smartphone. One could write an plugin for that... one js including all what is needed. display a small icon on the page. when the user click on the icon, a large qrcode open, and the user can scan it and go on on its phone. just suggesting
- InclinedPlane 16y ago
  A perfect example: printed tickets (for movies, live music, airplanes, etc.) Instead of having to rely on a service to generate a barcode (pretty common) you could generate QR-codes right in the browser, which makes it that much easier to switch over to a QR based system.
hazelnut 16y ago
it's great another way to get a qr code in just one line: https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3...
- sbarre 16y ago
  I love the OP and the concept, but this is so much simpler.
- deleted 16y ago
  [deleted]
- dustingetz 16y ago
  its a trade-off. the point of javascript is you don't have to download an image. i've heard of people inlining base-64 encoded images to avoid an extra request. is 4k javascript worth it to avoid a 2k png download hosted somewhere else? maybe.
- bauchidgw 16y ago
  just saying: http://miniqr.com http://miniqr.com has a (js) api, too. one line is propably possible.
- jusob 16y ago
  Or here: http://safe.mn/tools/#automatic-qr http://safe.mn/tools/#automatic-qr (Discalimer: from my website)
vdm 16y ago
View source: http://jeromeetienne.github.com/jquery-qrcode/examples/basic.html http://jeromeetienne.github.com/jquery-qrcode/examples/basic... It creates a <canvas> element. Sweet.
danfitch 16y ago
Looks like it uses canvas to draw the qr. Using something like http://raphaeljs.com/ http://raphaeljs.com/ would have made it even better for backwards compatibility. Awesome job though!
- flyosity 16y ago
  Could easily import excanvas.js to have it work in IE without an issue.
sylvinus 16y ago
great idea! slap me for being so 90s but would it also be possible to have it degrade into a small <table> when canvas is not supported?
josh33 16y ago
Could this be used from an iOS application or is there a better self-contained library for iOS?
pasbesoin 16y ago
Note that the qrcode.js part of this is // QRCode for JavaScript // // Copyright (c) 2009 Kazuhiko Arase // // URL: http://www.d-project.com/ Here's the related QR project(s). (Note the implementations in other languages.) http://www.d-project.com/qrcode/index.html http://www.d-project.com/qrcode/index.html I forget (if I ever knew) whether this has any connection with the originators of QR code: http://en.wikipedia.org/wiki/Denso http://en.wikipedia.org/wiki/Denso
benologist 16y ago
Isn't google ditching QR codes for NFC?
- mariani 16y ago
  the technologies have overlap in many use cases but are complementary, QR Codes need to be visible and NFC (as the "Near" implies) requires a receiver to be near; you also need to program an RFID chip to do NFC, for QR Codes all you need is a printer or a screen, again very different use cases from the publisher standpoint as well; I guess Google's choice has more to do with what they want Google places to turn in to that with a choice of technology by itself
runaway 16y ago
It would be more convenient if it automatically wrote the canvas out to a Base64 encoded png, imo. Makes for easy saving because I can then drag it to the desktop.

146 points by jerome_etienne 16y ago

hoping to make qrcode easier to use

lwhi 16y ago

In the past I've used the google charts API to generate QR codes. Is there a benefit to generating a qrcode on the client side?

_pius 16y ago
From the OP: It doesn't rely on external services which go on and off, or add latency while loading.
- lwhi 16y ago
  That's true - but the charts API works without JS, and is inserted into the page as an image which could be seen as equally advantageous. Still - it's great that this plugin exists.
zefhous 16y ago
I can see it being used with wkhtmltopdf (uses webkit to generate PDFs) so invoice generation or something doesn't require an external request.
- lwhi 16y ago
  That looks like a nice project, thx.
robotron 16y ago
I touched on this in another comment and zefhous is pretty much on the money. Where I'm at we have a web-based interface for our warehouse, inventory and CSR systems. QR codes are all over the place and with our web UI's we use Charts for QR generation. This causes a bottle-neck when things are moving really fast on the floor. I haven't looked at this yet but it sounds like something we need.
alunny 16y ago
The Google charts API doesn't provide an SSL interface - if you use it on a page served over https, you'll get a mixed content warning. [EDIT] I was mistaken, see andrewjshults's reply.
- andrewjshults 16y ago
  The google charts link at the top of the thread (http://news.ycombinator.com/item?id=2419367 http://news.ycombinator.com/item?id=2419367) https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3... is served via HTTPS. Their docs don't officially acknowledge supporting HTTPS but it looks like people have been doing it since 2007 (at least - http://groups.google.com/group/google-chart-api/browse_thread/thread/95c463d88cf3cfe4 http://groups.google.com/group/google-chart-api/browse_threa... )
  - alunny 16y ago
    Interesting - looks like chart.googleapis.com works over HTTPS: https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3... but chart.apis.google.com (which Google formerly used) does not: https://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.apis.google.com/chart?chs=150x150&cht=qr&#... Turns out I was looking at some outdated docs. Thanks!
yonran 16y ago
I had installed one of the numerous QR Code extensions for Chrome (press the button and it generates a QR code of the URL to continue reading on the phone). Unfortunately, I always wanted to send the URL to my phone _after_ losing wifi contact, so the image would fail to load. I was so annoyed that I downloaded the ZXing source and learned GWT so I could compile the QREncoder to Javascript for myself. This looks like a neater and more lightweight solution.

chopsueyar 16y ago

What specific examples do you guys use QR codes for on websites? How well does it work (not in terms of recognition, but traffic generation, etc)? I am looking for a use, but always come up with easier solutions that do not involved barcodes and image recognition on smartphones.

robotron 16y ago
I use it for our web-based warehouse/inventory system.
- chopsueyar 16y ago
  Can you go into more details on this? I spec'ed out a WMS, and had a prototype, but I am very curious to see what you have come up with.
jerome_etienne 16y ago
qr code is about easily passing data to your smart phone. The most common application is give url to your phone. android 2.2 got a feature to push links from chrome to android phone. with qrcode, you can do it from any browser to any smartphone. One could write an plugin for that... one js including all what is needed. display a small icon on the page. when the user click on the icon, a large qrcode open, and the user can scan it and go on on its phone. just suggesting
InclinedPlane 16y ago
A perfect example: printed tickets (for movies, live music, airplanes, etc.) Instead of having to rely on a service to generate a barcode (pretty common) you could generate QR-codes right in the browser, which makes it that much easier to switch over to a QR based system.

hazelnut 16y ago

it's great another way to get a qr code in just one line: https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=news.ybombinator.com https://chart.googleapis.com/chart?chs=150x150&cht=qr&#3...

sbarre 16y ago
I love the OP and the concept, but this is so much simpler.
deleted 16y ago
[deleted]
dustingetz 16y ago
its a trade-off. the point of javascript is you don't have to download an image. i've heard of people inlining base-64 encoded images to avoid an extra request. is 4k javascript worth it to avoid a 2k png download hosted somewhere else? maybe.
bauchidgw 16y ago
just saying: http://miniqr.com http://miniqr.com has a (js) api, too. one line is propably possible.
jusob 16y ago
Or here: http://safe.mn/tools/#automatic-qr http://safe.mn/tools/#automatic-qr (Discalimer: from my website)

vdm 16y ago

View source: http://jeromeetienne.github.com/jquery-qrcode/examples/basic.html http://jeromeetienne.github.com/jquery-qrcode/examples/basic... It creates a <canvas> element. Sweet.

danfitch 16y ago

Looks like it uses canvas to draw the qr. Using something like http://raphaeljs.com/ http://raphaeljs.com/ would have made it even better for backwards compatibility. Awesome job though!

flyosity 16y ago
Could easily import excanvas.js to have it work in IE without an issue.

sylvinus 16y ago

great idea! slap me for being so 90s but would it also be possible to have it degrade into a small <table> when canvas is not supported?

josh33 16y ago

Could this be used from an iOS application or is there a better self-contained library for iOS?

pasbesoin 16y ago

Note that the qrcode.js part of this is // QRCode for JavaScript // // Copyright (c) 2009 Kazuhiko Arase // // URL: http://www.d-project.com/ Here's the related QR project(s). (Note the implementations in other languages.) http://www.d-project.com/qrcode/index.html http://www.d-project.com/qrcode/index.html I forget (if I ever knew) whether this has any connection with the originators of QR code: http://en.wikipedia.org/wiki/Denso http://en.wikipedia.org/wiki/Denso

benologist 16y ago

Isn't google ditching QR codes for NFC?

mariani 16y ago
the technologies have overlap in many use cases but are complementary, QR Codes need to be visible and NFC (as the "Near" implies) requires a receiver to be near; you also need to program an RFID chip to do NFC, for QR Codes all you need is a printer or a screen, again very different use cases from the publisher standpoint as well; I guess Google's choice has more to do with what they want Google places to turn in to that with a choice of technology by itself

runaway 16y ago

It would be more convenient if it automatically wrote the canvas out to a Base64 encoded png, imo. Makes for easy saving because I can then drag it to the desktop.