Pure browser qrcode generation as simple as $('#contain').qrcode('foobar') | Hacker News Reader

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

notes.jetienne.com

146 pointsjerome_etienne29 comments

hoping to make qrcode easier to use

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.

I use it for our web-based warehouse/inventory system.

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.

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

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.

it's great

another way to get a qr code in just one line: https://chart.googleapis.com/chart?chs=150x150&cht=qr...

I love the OP and the concept, but this is so much simpler.

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.

just saying: http://miniqr.com has a (js) api, too. one line is propably possible.

Or here: http://safe.mn/tools/#automatic-qr

(Discalimer: from my website)

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?

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

Could easily import excanvas.js to have it work in IE without an issue.

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

I forget (if I ever knew) whether this has any connection with the originators of QR code:

http://en.wikipedia.org/wiki/Denso

View source: http://jeromeetienne.github.com/jquery-qrcode/examples/basic...

It creates a <canvas> element. Sweet.

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.

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?

From the OP: It doesn't rely on external services which go on and off, or add latency while loading.

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.

I can see it being used with wkhtmltopdf (uses webkit to generate PDFs) so invoice generation or something doesn't require an external request.

That looks like a nice project, thx.

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.

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.

The google charts link at the top of the thread (http://news.ycombinator.com/item?id=2419367) https://chart.googleapis.com/chart?chs=150x150&cht=qr... 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_threa... )

Interesting - looks like chart.googleapis.com works over HTTPS: https://chart.googleapis.com/chart?chs=150x150&cht=qr...

but chart.apis.google.com (which Google formerly used) does not: https://chart.apis.google.com/chart?chs=150x150&cht=qr&#...

Turns out I was looking at some outdated docs. Thanks!

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.

Isn't google ditching QR codes for NFC?

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

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

Reply on news.ycombinator.com