/html5-qrcode.js

http://github.com/amanuel/JS-HTML5-QRCode-Generator · JavaScript · 64 lines · 38 code · 9 blank · 17 comment · 4 complexity · a3b8de214fafa875f5f37b030680f2bc MD5 · raw file

  1. //---------------------------------------------------------------------
  2. // JavaScript-HTML5 QRCode Generator
  3. //
  4. // Copyright (c) 2011 Amanuel Tewolde
  5. //
  6. // Licensed under the MIT license:
  7. // http://www.opensource.org/licenses/mit-license.php
  8. //
  9. //---------------------------------------------------------------------
  10. // Generates a QRCode of text provided.
  11. // First QRCode is rendered to a canvas.
  12. // The canvas is then turned to an image PNG
  13. // before being returned as an <img> tag.
  14. function showQRCode(text) {
  15. var dotsize = 5; // size of box drawn on canvas
  16. var padding = 10; // (white area around your QRCode)
  17. var black = "rgb(0,0,0)";
  18. var white = "rgb(255,255,255)";
  19. var QRCodeVersion = 15; // 1-40 see http://www.denso-wave.com/qrcode/qrgene2-e.html
  20. var canvas=document.createElement('canvas');
  21. var qrCanvasContext = canvas.getContext('2d');
  22. try {
  23. // QR Code Error Correction Capability
  24. // Higher levels improves error correction capability while decreasing the amount of data QR Code size.
  25. // QRErrorCorrectLevel.L (5%) QRErrorCorrectLevel.M (15%) QRErrorCorrectLevel.Q (25%) QRErrorCorrectLevel.H (30%)
  26. // eg. L can survive approx 5% damage...etc.
  27. var qr = new QRCode(QRCodeVersion, QRErrorCorrectLevel.L);
  28. qr.addData(text);
  29. qr.make();
  30. }
  31. catch(err) {
  32. var errorChild = document.createElement("p");
  33. var errorMSG = document.createTextNode("QR Code FAIL! " + err);
  34. errorChild.appendChild(errorMSG);
  35. return errorChild;
  36. }
  37. var qrsize = qr.getModuleCount();
  38. canvas.setAttribute('height',(qrsize * dotsize) + padding);
  39. canvas.setAttribute('width',(qrsize * dotsize) + padding);
  40. var shiftForPadding = padding/2;
  41. if (canvas.getContext){
  42. for (var r = 0; r < qrsize; r++) {
  43. for (var c = 0; c < qrsize; c++) {
  44. if (qr.isDark(r, c))
  45. qrCanvasContext.fillStyle = black;
  46. else
  47. qrCanvasContext.fillStyle = white;
  48. qrCanvasContext.fillRect ((c*dotsize) +shiftForPadding,(r*dotsize) + shiftForPadding,dotsize,dotsize); // x, y, w, h
  49. }
  50. }
  51. }
  52. var imgElement = document.createElement("img");
  53. imgElement.src = canvas.toDataURL("image/png");
  54. return imgElement;
  55. }