canvas.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import merge from "../help/merge.js";
  2. import {calculateEncodingAttributes, getTotalWidthOfEncodings, getMaximumHeightOfEncodings} from "./shared.js";
  3. class CanvasRenderer{
  4. constructor(canvas, encodings, options){
  5. this.canvas = canvas;
  6. this.encodings = encodings;
  7. this.options = options;
  8. }
  9. render(){
  10. // Abort if the browser does not support HTML5 canvas
  11. if (!this.canvas.getContext) {
  12. throw new Error('The browser does not support canvas.');
  13. }
  14. this.prepareCanvas();
  15. for(let i = 0; i < this.encodings.length; i++){
  16. var encodingOptions = merge(this.options, this.encodings[i].options);
  17. this.drawCanvasBarcode(encodingOptions, this.encodings[i]);
  18. this.drawCanvasText(encodingOptions, this.encodings[i]);
  19. this.moveCanvasDrawing(this.encodings[i]);
  20. }
  21. this.restoreCanvas();
  22. }
  23. prepareCanvas(){
  24. // Get the canvas context
  25. var ctx = this.canvas.getContext("2d");
  26. ctx.save();
  27. calculateEncodingAttributes(this.encodings, this.options, ctx);
  28. var totalWidth = getTotalWidthOfEncodings(this.encodings);
  29. var maxHeight = getMaximumHeightOfEncodings(this.encodings);
  30. this.canvas.width = totalWidth + this.options.marginLeft + this.options.marginRight;
  31. this.canvas.height = maxHeight;
  32. // Paint the canvas
  33. ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  34. if(this.options.background){
  35. ctx.fillStyle = this.options.background;
  36. ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
  37. }
  38. ctx.translate(this.options.marginLeft, 0);
  39. }
  40. drawCanvasBarcode(options, encoding){
  41. // Get the canvas context
  42. var ctx = this.canvas.getContext("2d");
  43. var binary = encoding.data;
  44. // Creates the barcode out of the encoded binary
  45. var yFrom;
  46. if(options.textPosition == "top"){
  47. yFrom = options.marginTop + options.fontSize + options.textMargin;
  48. }
  49. else{
  50. yFrom = options.marginTop;
  51. }
  52. ctx.fillStyle = options.lineColor;
  53. for(var b = 0; b < binary.length; b++){
  54. var x = b * options.width + encoding.barcodePadding;
  55. if(binary[b] === "1"){
  56. ctx.fillRect(x, yFrom, options.width, options.height);
  57. }
  58. else if(binary[b]){
  59. ctx.fillRect(x, yFrom, options.width, options.height * binary[b]);
  60. }
  61. }
  62. }
  63. drawCanvasText(options, encoding){
  64. // Get the canvas context
  65. var ctx = this.canvas.getContext("2d");
  66. var font = options.fontOptions + " " + options.fontSize + "px " + options.font;
  67. // Draw the text if displayValue is set
  68. if(options.displayValue){
  69. var x, y;
  70. if(options.textPosition == "top"){
  71. y = options.marginTop + options.fontSize - options.textMargin;
  72. }
  73. else{
  74. y = options.height + options.textMargin + options.marginTop + options.fontSize;
  75. }
  76. ctx.font = font;
  77. // Draw the text in the correct X depending on the textAlign option
  78. if(options.textAlign == "left" || encoding.barcodePadding > 0){
  79. x = 0;
  80. ctx.textAlign = 'left';
  81. }
  82. else if(options.textAlign == "right"){
  83. x = encoding.width - 1;
  84. ctx.textAlign = 'right';
  85. }
  86. // In all other cases, center the text
  87. else{
  88. x = encoding.width / 2;
  89. ctx.textAlign = 'center';
  90. }
  91. ctx.fillText(encoding.text, x, y);
  92. }
  93. }
  94. moveCanvasDrawing(encoding){
  95. var ctx = this.canvas.getContext("2d");
  96. ctx.translate(encoding.width, 0);
  97. }
  98. restoreCanvas(){
  99. // Get the canvas context
  100. var ctx = this.canvas.getContext("2d");
  101. ctx.restore();
  102. }
  103. }
  104. export default CanvasRenderer;