纽威
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

89 lines
2.8 KiB

3 years ago
  1. (function( $ ){
  2. $.fn.qrcode = function(options) {
  3. // if options is string,
  4. if( typeof options === 'string' ){
  5. options = { text: options };
  6. }
  7. // set default values
  8. // typeNumber < 1 for automatic calculation
  9. options = $.extend( {}, {
  10. render : "canvas",
  11. width : 256,
  12. height : 256,
  13. typeNumber : -1,
  14. correctLevel : QRErrorCorrectLevel.H,
  15. background : "#ffffff",
  16. foreground : "#000000"
  17. }, options);
  18. var createCanvas = function(){
  19. // create the qrcode itself
  20. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  21. qrcode.addData(options.text);
  22. qrcode.make();
  23. // create canvas element
  24. var canvas = document.createElement('canvas');
  25. canvas.width = options.width;
  26. canvas.height = options.height;
  27. var ctx = canvas.getContext('2d');
  28. // compute tileW/tileH based on options.width/options.height
  29. var tileW = options.width / qrcode.getModuleCount();
  30. var tileH = options.height / qrcode.getModuleCount();
  31. // draw in the canvas
  32. for( var row = 0; row < qrcode.getModuleCount(); row++ ){
  33. for( var col = 0; col < qrcode.getModuleCount(); col++ ){
  34. ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
  35. var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
  36. var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
  37. ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH), w, h);
  38. }
  39. }
  40. // return just built canvas
  41. return canvas;
  42. }
  43. // from Jon-Carlos Rivera (https://github.com/imbcmdth)
  44. var createTable = function(){
  45. // create the qrcode itself
  46. var qrcode = new QRCode(options.typeNumber, options.correctLevel);
  47. qrcode.addData(options.text);
  48. qrcode.make();
  49. // create table element
  50. var $table = $('<table></table>')
  51. .css("width", options.width+"px")
  52. .css("height", options.height+"px")
  53. .css("border", "0px")
  54. .css("border-collapse", "collapse")
  55. .css('background-color', options.background);
  56. // compute tileS percentage
  57. var tileW = options.width / qrcode.getModuleCount();
  58. var tileH = options.height / qrcode.getModuleCount();
  59. // draw in the table
  60. for(var row = 0; row < qrcode.getModuleCount(); row++ ){
  61. var $row = $('<tr></tr>').css('height', tileH+"px").appendTo($table);
  62. for(var col = 0; col < qrcode.getModuleCount(); col++ ){
  63. $('<td></td>')
  64. .css('width', tileW+"px")
  65. .css('background-color', qrcode.isDark(row, col) ? options.foreground : options.background)
  66. .appendTo($row);
  67. }
  68. }
  69. // return just built canvas
  70. return $table;
  71. }
  72. return this.each(function(){
  73. var element = options.render == "canvas" ? createCanvas() : createTable();
  74. jQuery(element).appendTo(this);
  75. });
  76. };
  77. })( jQuery );