BrowserSvgCodeWriter.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. import EncodeHintType from '../core/EncodeHintType';
  2. import Encoder from '../core/qrcode/encoder/Encoder';
  3. import ErrorCorrectionLevel from '../core/qrcode/decoder/ErrorCorrectionLevel';
  4. import IllegalArgumentException from '../core/IllegalArgumentException';
  5. import IllegalStateException from '../core/IllegalStateException';
  6. /**
  7. * @deprecated Moving to @zxing/browser
  8. */
  9. class BrowserSvgCodeWriter {
  10. /**
  11. * Constructs. 😉
  12. */
  13. constructor(containerElement) {
  14. if (typeof containerElement === 'string') {
  15. this.containerElement = document.getElementById(containerElement);
  16. }
  17. else {
  18. this.containerElement = containerElement;
  19. }
  20. }
  21. /**
  22. * Writes the QR code to a SVG and renders it in the container.
  23. */
  24. write(contents, width, height, hints = null) {
  25. if (contents.length === 0) {
  26. throw new IllegalArgumentException('Found empty contents');
  27. }
  28. if (width < 0 || height < 0) {
  29. throw new IllegalArgumentException('Requested dimensions are too small: ' + width + 'x' + height);
  30. }
  31. let quietZone = hints && hints.get(EncodeHintType.MARGIN) !== undefined
  32. ? Number.parseInt(hints.get(EncodeHintType.MARGIN).toString(), 10)
  33. : BrowserSvgCodeWriter.QUIET_ZONE_SIZE;
  34. const code = this.encode(hints, contents);
  35. return this.renderResult(code, width, height, quietZone);
  36. }
  37. /**
  38. * Encodes the content to a Barcode type.
  39. */
  40. encode(hints, contents) {
  41. let errorCorrectionLevel = ErrorCorrectionLevel.L;
  42. if (hints && hints.get(EncodeHintType.ERROR_CORRECTION) !== undefined) {
  43. errorCorrectionLevel = ErrorCorrectionLevel.fromString(hints.get(EncodeHintType.ERROR_CORRECTION).toString());
  44. }
  45. const code = Encoder.encode(contents, errorCorrectionLevel, hints);
  46. return code;
  47. }
  48. /**
  49. * Renders the SVG in the container.
  50. *
  51. * @note the input matrix uses 0 == white, 1 == black. The output matrix uses 0 == black, 255 == white (i.e. an 8 bit greyscale bitmap).
  52. */
  53. renderResult(code, width /*int*/, height /*int*/, quietZone /*int*/) {
  54. // if (this.format && format != this.format) {
  55. // throw new IllegalArgumentException("Can only encode QR_CODE, but got " + format)
  56. // }
  57. const input = code.getMatrix();
  58. if (input === null) {
  59. throw new IllegalStateException();
  60. }
  61. const inputWidth = input.getWidth();
  62. const inputHeight = input.getHeight();
  63. const qrWidth = inputWidth + (quietZone * 2);
  64. const qrHeight = inputHeight + (quietZone * 2);
  65. const outputWidth = Math.max(width, qrWidth);
  66. const outputHeight = Math.max(height, qrHeight);
  67. const multiple = Math.min(Math.floor(outputWidth / qrWidth), Math.floor(outputHeight / qrHeight));
  68. // Padding includes both the quiet zone and the extra white pixels to accommodate the requested
  69. // dimensions. For example, if input is 25x25 the QR will be 33x33 including the quiet zone.
  70. // If the requested size is 200x160, the multiple will be 4, for a QR of 132x132. These will
  71. // handle all the padding from 100x100 (the actual QR) up to 200x160.
  72. const leftPadding = Math.floor((outputWidth - (inputWidth * multiple)) / 2);
  73. const topPadding = Math.floor((outputHeight - (inputHeight * multiple)) / 2);
  74. const svgElement = this.createSVGElement(outputWidth, outputHeight);
  75. const placeholder = this.createSvgPathPlaceholderElement(width, height);
  76. svgElement.append(placeholder);
  77. this.containerElement.appendChild(svgElement);
  78. // 2D loop
  79. for (let inputY = 0, outputY = topPadding; inputY < inputHeight; inputY++, outputY += multiple) {
  80. // Write the contents of this row of the barcode
  81. for (let inputX = 0, outputX = leftPadding; inputX < inputWidth; inputX++, outputX += multiple) {
  82. if (input.get(inputX, inputY) === 1) {
  83. const svgRectElement = this.createSvgRectElement(outputX, outputY, multiple, multiple);
  84. svgElement.appendChild(svgRectElement);
  85. }
  86. }
  87. }
  88. return svgElement;
  89. }
  90. /**
  91. * Creates a SVG element.
  92. */
  93. createSVGElement(w, h) {
  94. const el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'svg');
  95. el.setAttributeNS(null, 'width', h.toString());
  96. el.setAttributeNS(null, 'height', w.toString());
  97. return el;
  98. }
  99. /**
  100. * Creates a SVG rect.
  101. */
  102. createSvgPathPlaceholderElement(w, h) {
  103. const el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'path');
  104. el.setAttributeNS(null, 'd', `M0 0h${w}v${h}H0z`);
  105. el.setAttributeNS(null, 'fill', 'none');
  106. return el;
  107. }
  108. /**
  109. * Creates a SVG rect.
  110. */
  111. createSvgRectElement(x, y, w, h) {
  112. const el = document.createElementNS(BrowserSvgCodeWriter.SVG_NS, 'rect');
  113. el.setAttributeNS(null, 'x', x.toString());
  114. el.setAttributeNS(null, 'y', y.toString());
  115. el.setAttributeNS(null, 'height', w.toString());
  116. el.setAttributeNS(null, 'width', h.toString());
  117. el.setAttributeNS(null, 'fill', '#000000');
  118. return el;
  119. }
  120. }
  121. /**
  122. * Default quiet zone in pixels.
  123. */
  124. BrowserSvgCodeWriter.QUIET_ZONE_SIZE = 4;
  125. /**
  126. * SVG markup NameSpace
  127. */
  128. BrowserSvgCodeWriter.SVG_NS = 'http://www.w3.org/2000/svg';
  129. export { BrowserSvgCodeWriter };