demo_writer.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>zxing-cpp/wasm writer demo</title>
  7. <link rel="shortcut icon" href="#" />
  8. <script src="zxing_writer.js"></script>
  9. <script>
  10. var zxing = ZXing().then(function(instance) {
  11. zxing = instance; // this line is supposedly not required but with current emsdk it is :-/
  12. });
  13. function generateBarcode() {
  14. var text = document.getElementById("input_text").value;
  15. var format = document.getElementById("input_format").value;
  16. var charset = document.getElementById("input_charset").value;
  17. var margin = parseInt(document.getElementById("input_margin").value);
  18. var width = parseInt(document.getElementById("input_width").value);
  19. var height = parseInt(document.getElementById("input_height").value);
  20. var eccLevel = parseInt(document.getElementById("input_ecclevel").value);
  21. var container = document.getElementById("write_result")
  22. var result = zxing.generateBarcode(text, format, charset, margin, width, height, eccLevel);
  23. if (result.image) {
  24. showImage(container, result.image);
  25. } else {
  26. container.innerHTML = '<font color="red">Error: ' + result.error + '</font>';
  27. container.style.width = '300px';
  28. }
  29. result.delete();
  30. }
  31. function showImage(container, fileData) {
  32. container.innerHTML = '';
  33. var img = document.createElement("img");
  34. img.addEventListener('load', function() {
  35. container.style.width = img.width + 'px';
  36. container.style.height = img.height + 'px';
  37. });
  38. img.src = URL.createObjectURL(new Blob([fileData]))
  39. container.appendChild(img);
  40. }
  41. </script>
  42. <style>
  43. #input_text {
  44. width: 240px;
  45. }
  46. select,
  47. input {
  48. margin: 3px 0px;
  49. width: 120px;
  50. }
  51. tr td:first-child {
  52. text-align: right;
  53. }
  54. div {
  55. float: left;
  56. margin: 0.5em;
  57. }
  58. </style>
  59. </head>
  60. <body>
  61. <h2>zxing-cpp/wasm writer demo</h2>
  62. <p>
  63. This is a simple demo of the wasm wrapper of <a href="https://github.com/zxing-cpp/zxing-cpp">zxing-cpp</a>
  64. for generating barcodes.
  65. </p>
  66. <p></p>
  67. <div>
  68. Enter your text here:<br />
  69. <textarea id="input_text"></textarea>
  70. <br />
  71. <table>
  72. <tr>
  73. <td>Format:</td>
  74. <td>
  75. <select id="input_format">
  76. <option value="Aztec">Aztec</option>
  77. <option value="Codabar">Codabar</option>
  78. <option value="Code39">Code 39</option>
  79. <option value="Code93">Code 93</option>
  80. <option value="Code128">Code 128</option>
  81. <option value="DataMatrix">DataMatrix</option>
  82. <option value="EAN8">EAN-8</option>
  83. <option value="EAN13">EAN-13</option>
  84. <option value="ITF">ITF</option>
  85. <option value="PDF417">PDF417</option>
  86. <option value="QRCode" selected="">QR Code</option>
  87. <option value="UPCA">UPC-A</option>
  88. <option value="UPCE">UPC-E</option>
  89. </select>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td>Encoding:</td>
  94. <td>
  95. <select id="input_charset">
  96. <option value="Cp437">Cp437</option>
  97. <option value="ISO-8859-1">ISO-8859-1</option>
  98. <option value="ISO-8859-2">ISO-8859-2</option>
  99. <option value="ISO-8859-3">ISO-8859-3</option>
  100. <option value="ISO-8859-4">ISO-8859-4</option>
  101. <option value="ISO-8859-5">ISO-8859-5</option>
  102. <option value="ISO-8859-6">ISO-8859-6</option>
  103. <option value="ISO-8859-7">ISO-8859-7</option>
  104. <option value="ISO-8859-8">ISO-8859-8</option>
  105. <option value="ISO-8859-9">ISO-8859-9</option>
  106. <option value="ISO-8859-10">ISO-8859-10</option>
  107. <option value="ISO-8859-11">ISO-8859-11</option>
  108. <option value="ISO-8859-13">ISO-8859-13</option>
  109. <option value="ISO-8859-14">ISO-8859-14</option>
  110. <option value="ISO-8859-15">ISO-8859-15</option>
  111. <option value="ISO-8859-16">ISO-8859-16</option>
  112. <option value="Shift_JIS">Shift_JIS</option>
  113. <option value="windows-1250">windows-1250</option>
  114. <option value="windows-1251">windows-1251</option>
  115. <option value="windows-1252">windows-1252</option>
  116. <option value="windows-1256">windows-1256</option>
  117. <option value="UTF-16BE">UTF-16BE</option>
  118. <option value="UTF-8" selected="">UTF-8</option>
  119. <option value="ASCII">ASCII</option>
  120. <option value="Big5">Big5</option>
  121. <option value="GB2312">GB2312</option>
  122. <option value="GB18030">GB18030</option>
  123. <option value="EUC-CN">EUC-CN</option>
  124. <option value="GBK">GBK</option>
  125. <option value="EUC-KR">EUC-KR</option>
  126. </select>
  127. </td>
  128. </tr>
  129. <td>ECC Level:</td>
  130. <td>
  131. <select id="input_ecclevel">
  132. <option value="-1">Default</option>
  133. <option value="0">0</option>
  134. <option value="1">1</option>
  135. <option value="2">2</option>
  136. <option value="3">3</option>
  137. <option value="4">4</option>
  138. <option value="5">5</option>
  139. <option value="6">6</option>
  140. <option value="7">7</option>
  141. <option value="8">8</option>
  142. </select>
  143. </td>
  144. </tr>
  145. <td>Quiet Zone:</td>
  146. <td><input id="input_margin" type="number" value="10" /></td>
  147. </tr>
  148. <td>Image Width:</td>
  149. <td><input id="input_width" type="number" value="200" /></td>
  150. </tr>
  151. <td>Image Height:</td>
  152. <td><input id="input_height" type="number" value="200" /></td>
  153. </tr>
  154. </table>
  155. <br />
  156. <input type="button" value="Generate" onclick="generateBarcode()" />
  157. </div>
  158. <div id="write_result"></div>
  159. </body>
  160. </html>