{"id":13526838,"url":"https://github.com/metafloor/bwip-js","last_synced_at":"2025-05-08T23:34:04.764Z","repository":{"id":28779437,"uuid":"32302012","full_name":"metafloor/bwip-js","owner":"metafloor","description":"Barcode Writer in Pure JavaScript","archived":false,"fork":false,"pushed_at":"2025-04-28T22:19:59.000Z","size":50874,"stargazers_count":2193,"open_issues_count":28,"forks_count":316,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-05-08T22:18:35.669Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metafloor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-03-16T04:50:44.000Z","updated_at":"2025-05-08T09:03:12.000Z","dependencies_parsed_at":"2022-06-28T02:30:44.684Z","dependency_job_id":"480cf0ad-ca3a-4e0d-b13a-340d9dd96adb","html_url":"https://github.com/metafloor/bwip-js","commit_stats":{"total_commits":163,"total_committers":5,"mean_commits":32.6,"dds":"0.024539877300613466","last_synced_commit":"91047163f6e9ec0924f6a029eabf59cae4559bc8"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafloor%2Fbwip-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafloor%2Fbwip-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafloor%2Fbwip-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafloor%2Fbwip-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metafloor","download_url":"https://codeload.github.com/metafloor/bwip-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253155005,"owners_count":21862625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T06:01:35.731Z","updated_at":"2025-05-08T23:34:04.736Z","avatar_url":"https://github.com/metafloor.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","☁️⚙️ API \u0026 Data"],"sub_categories":["QR Code \u0026 Barcode ║█║▌║█║▌│║▌║▌█║"],"readme":"# // Barcode Writer in Pure JavaScript\n\n\n\u003ca href=\"http://metafloor.github.io/bwip-js\"\u003e\u003cimg alt=\"bwip-js\" align=\"right\" src=\"http://metafloor.github.io/bwip-js/images/bwip-js.png\"\u003e\u003c/a\u003e\nbwip-js is a translation to native JavaScript of the amazing code provided in [Barcode Writer in Pure PostScript](https://github.com/bwipp/postscriptbarcode).  The translated code can run on any modern browser or JavaScript-based server framework.\n\nThe library has encoding modules for over 100 different barcode types and standards.\nAll linear and two-dimensional barcodes in common use (and many uncommon\nones) are available.  An exhaustive list of supported barcode types can be\nfound at the end of this document.  Barcodes are generated as PNG images (node-js and react-native)\nor to a canvas (browser) or as SVG (all platforms).\n\n\u003e As of version 4.5, bwip-js has been partitioned into four platform-specific packages plus the cross-platform main package.  The sub-packages are currently experimental but are the solution to current build chains not properly supporting the `exports` map in `package.json`.  Please use them and report any issues you find.\n\n## Status \n\n* Current bwip-js version is 4.6.0 (2025-04-20)\n* Current BWIPP version is 2025-04-19\n* Node.js compatibility: 6.0\n* Browser compatibility: Edge, Firefox, Chrome\n\n## Supported Platforms\n\n* [Browser](#browser-usage)\n* [Node.js](#nodejs-request-handler)\n* [SVG (All Platforms)](#svg-all-platforms)\n* [React](#react-usage)\n* [React Native](#react-native)\n* [Electron](#electron-example)\n* [Command Line](#command-line-interface)\n\n## Links\n\n* [Home Page](http://metafloor.github.io/bwip-js/)\n* [GitHub Repository](https://github.com/metafloor/bwip-js)\n* [`bwipjs` Methods Reference](https://github.com/metafloor/bwip-js/wiki/Methods-Reference)\n* [Online Barcode Generator](http://metafloor.github.io/bwip-js/demo/demo.html)\n* [Online Barcode API](https://github.com/metafloor/bwip-js/wiki/Online-Barcode-API)\n* [npm Page](https://www.npmjs.com/package/bwip-js)\n* [BWIPP Documentation](https://github.com/bwipp/postscriptbarcode/wiki)\n* [Differences From BWIPP](https://github.com/metafloor/bwip-js/wiki/Differences-From-BWIPP)\n* [Supported Barcode Types](https://github.com/metafloor/bwip-js/wiki/BWIPP-Barcode-Types)\n* [Using Your Own Fonts](https://github.com/metafloor/bwip-js/wiki/Using-Your-Own-Fonts)\n* [Annotated Example Drawing Object](https://github.com/metafloor/bwip-js/wiki/Annotated-Example-Drawing-Object)\n* [Working with the Raw BWIPP Rendering Data](https://github.com/metafloor/bwip-js/wiki/Notes-on-the-Raw-BWIPP-Data)\n\n## Installation\n\nThe bwip-js package has been partitioned into four platform-specific packages plus the main cross-platform package.  If you install the main package and cannot get its exports to work with your build stack, try installing a platform-specific package. The platform-specific packages are ES modules only, so you will need a modern build environment.  The exception is the node package, which also contains a `require()` compatible export.\n\n\nYou can download the main package using:\n\n```\nnpm install bwip-js\n```\n\nOr one of the platform-specific packages using:\n\n```\nnpm install @bwip-js/node\nnpm install @bwip-js/browser\nnpm install @bwip-js/react-native\nnpm install @bwip-js/generic\n```\n\nThe node, browser and react-native packages include both an image rending interface (`toCanvas()` on the browser, `toBuffer()` on node, `toDataURL()` on react-native), plus the SVG and custom drawing context interfaces.\n\nThe generic package contains only exports that run on any platform, namely the SVG and custom drawing context interfaces.\n\nThe latest code can be obtained from github:\n\n    https://github.com/metafloor/bwip-js\n\nThe bwip-js branches and the npm versions are automatically sync'd with each release. The main package is located under the master branch; the platform-specific packages are maintained under their like-named branches.\n\n## Online Barcode Generator\n\nAn [online barcode generator](http://metafloor.github.io/bwip-js/demo/demo.html)\ndemonstrates all of the features of bwip-js.  The app is also available \nin the root bwip-js directory.  See [Demo HTML App](#demo-html-app).\n\n## Online Barcode API\n\nA bwip-js barcode service is available online, ready to serve up barcode images\non demand.\n\nYou can generate barcodes from anywhere on the web.  Embed the URLs in your\nHTML documents or retrieve the barcode images directly from your non-JavaScript\nserver.  (JavaScript-based servers should use the bwip-js code directly - it will\nbe a lot more performant.)\n\nFor details on how to use this service, see [Online Barcode API](https://github.com/metafloor/bwip-js/wiki/Online-Barcode-API).\n\n## Working With bwip-js Methods\n\nMost of the public methods of the bwip-js export use an options object.  Only two values are required:\n\n- `bcid` : The name of the barcode type/symbol.\n- `text` : The text to encode.\n\nAll remaining options are optional, though you may find some quite useful.\n\nThe options values can be divided into two parts, bwip-js specific options and BWIPP options.\n\nThe bwip-js options are:\n\n- `scaleX` : The x-axis scaling factor.  Must be an integer \u003e 0.  Default is 2.\n- `scaleY` : The y-axis scaling factor.  Must be an integer \u003e 0.  Default is `scaleX`.\n- `scale` : Sets both the x-axis and y-axis scaling factors.  Must be an integer \u003e 0.\n\n- `rotate` : Allows rotating the image to one of the four orthogonal orientations.  A string value.  Must be one of:\n\n    - `'N'` : Normal (not rotated).  The default.\n    - `'R'` : Clockwise (right) 90 degree rotation.\n    - `'L'` : Counter-clockwise (left) 90 degree rotation.\n    - `'I'` : Inverted 180 degree rotation.\n\n- `binarytext` : The default behavior is to encode the `text` string as UTF-8 binary bytes.  If the text is already 8-bit encoded, you can disable this behavior by setting the flag to `true`.\n- `padding` : Shorthand for setting `paddingtop`, `paddingleft`, `paddingright`, and `paddingbottom`.\n- `paddingwidth` : Shorthand for setting `paddingleft` and `paddingright`.\n- `paddingheight` : Shorthand for setting `paddingtop` and `paddingbottom`.\n- `paddingtop` : Sets the height of the padding area, in points, on the top of the barcode image. Must be an integer \u003e= 0. Rotates and scales with the image.\n- `paddingleft` : Sets the width of the padding area, in points, on the left side of the barcode image. Must be an integer \u003e= 0. Rotates and scales with the image.\n- `paddingright` : Sets the width of the padding area, in points, on the right side of the barcode image. Must be an integer \u003e= 0. Rotates and scales with the image.\n- `paddingbottom` : Sets the height of the padding area, in points, on the bottom of the barcode image. Must be an integer \u003e= 0. Rotates and scales with the image.\n- `backgroundcolor` : This is actually a BWIPP option but is better handled by the bwip-js drawing code.  Expects either a hex RGB, RRGGBB or CCMMYYKK string value or CSS-style #RGB or #RRGGBB string value.\n\nFor the BWIPP specific options, you will need to consult the\n[BWIPP documentation](https://github.com/bwipp/postscriptbarcode/wiki)\nto determine what options are available for each barcode type.\n\nAll of the BWIPP color options (e.g. `barcolor`, `textcolor`, `bordercolor`) can be specified using either RGB, RRGGBB or CCMMYYKK formats or the CSS-style #RGB and #RRGGBB formats.\n\nNote that bwip-js normalizes the BWIPP `width` and `height` options to be in millimeters.\nThe resulting images are rendered at 72 dpi.  To convert to pixels, use a factor of 2.835 px/mm\n(72 dpi / 25.4 mm/in).  The bwip-js scale options multiply the `width`, `height`, and `padding`.\n\n\u003e  An important note about the BWIPP `width` and `height` parameters.\n\nBarcodes have the concept of module width (and height if a two-dimensional barcode).  For\nlinear barcodes, the module width is the width of the narrowest bar, and all other bar widths are\na multiple of it.  For 2D symbols, module width and height are the dimensions of the square\nor rectangle that defines the symbol's layout grid.\n\nFor a barcode to be \"in spec\", the individual module dimensions must be consistent throughout the\nsymbol.  With high resolution printing, you can add/subtract a dot to adjust the size of individual\nmodules so the overall image meets the requested width or height, while still keeping the module\nsize within spec.  This is the intention behind BWIPP's `width` and `height` parameters.\n\nbwip-js is designed for web usage, with a target display resolution of 72dpi.  (All of BWIPP's\ninternals are calculated in points and bwip-js just maps 1pt to 1px.)  At that low\nresolution, it is not possible to add or subtract pixels without causing the symbol to go\nout of spec.  Imagine a fairly common module width of 2px.  If you add or subtract a pixel,\nyou have changed the size by 50%.  Typical barcode specs require module sizes to be within \n5-10 pecent of nominal.\n\nFor this reason, bwip-js uses a constant module size so the resulting image is as \nlarge as possible, without exceeding the requested `width` or `height`.\nThe design causes the rendered barcodes to grow in \"quantums\".  An image will be\nX-pixels wide with a module with of 2px, and Y-pixels wide with a module width of 3px,\nand can not vary between those two sizes.\n\nWith bwip-js, the `scale` parameters can be thought of as requesting a particular module\nwidth.  `scale=1` maps to a 1px module.  `scale=2` is a 2px module.  Etc.\n\nWhen you specify `width`, you are effectively changing the scale of the final image.\nInternally, bwip-js calcuates the requested `width x scale`, then divides\nby the number of modules the symbol requires.  The floor of that value is the\nmodule width (scale) of the rendered barcode.\n\n\n\u003ca name=\"browser-usage\"\u003e\u003c/a\u003e\n## Browser Usage\n\nTo use in a browser without a bundler, add the following to the head of your page:\n\n```\n\u003cscript type=\"text/javascript\" src=\"url-path-to/bwip-js/dist/bwip-js-min.js\"\u003e\u003c/script\u003e\n```\n\nWhile developing your project, you may want to use `dist/bwip-js.js` to get better stack\ntraces.\n\nIf you are using `RequireJS` or a common-js bundling utility, the bwip-js scripts are\nstructured as UMDs and should work with your environment.\n\nThe scripts adds a single `bwipjs` global object.  To draw a barcode to a canvas:\n\n```javascript\ntry {\n    // The return value is the canvas element\n    let canvas = bwipjs.toCanvas('mycanvas', {\n        bcid:        'code128',       // Barcode type\n        text:        '0123456789',    // Text to encode\n        scale:       3,               // 3x scaling factor\n        height:      10,              // Bar height, in millimeters\n        includetext: true,            // Show human-readable text\n        textxalign:  'center',        // Always good to set this\n    });\n} catch (e) {\n    // `e` may be a string or Error object\n}\n```\n\nThe `bwipjs.toCanvas()` method takes two parameters:\n\n* The canvas on which to render the barcode. This can by an `id` string or the actual\n  canvas element. The rendering will automatically resize the canvas to match the\n  barcode image.\n* A bwip-js/BWIPP options object.\n \nOn return from `toCanvas()`, the barcode image will be fully rendered to the canvas.\n\nIf you would prefer to display the barcode using an `\u003cimg\u003e` tag or with CSS `background-image`,\npass in a detached or hidden canvas, and use the canvas method\n[HTMLCanvasElement.toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)\nto get a data URL. For example:\n\n```javascript\nlet canvas = document.createElement('canvas');\ntry {\n    bwipjs.toCanvas(canvas, options);\n    document.getElementById('my-img').src = canvas.toDataURL('image/png');\n} catch (e) {\n    // `e` may be a string or Error object\n}\n```\n\n\u003ca name=\"browser-es6-module-usage\"\u003e\u003c/a\u003e\n## Browser ES6 Module Usage\n\nThe ESM provides the same API as the standard browser module using:\n\n```javascript\nimport bwipjs from 'bwip-js';           // If using the main package import\n  // or\nimport bwipjs from '@bwip-js/browser';  // Platform-specific package import\n\n// ... identical bwipjs.toCanvas() interface as above ...\n```\n\nThe ESM also facilitates bundler tree shaking by providing the individual encoders as named exports.\nEach exported encoder functions identically to `bwipjs.toCanvas()`.\n\nThe exported names are the same as the `bcid` names, with the caveat that dashes `-` are replaced with\nunderscores `_`.  For example, to import the `gs1-128` encoder, you would use:\n\n```javascript\nimport { gs1_128 } from 'bwip-js';\n  // or\nimport { gs1_128 } from '@bwipjs/browser';\n\ntry {\n    gs1_128('my-canvas', options);\n} catch (e) {\n    // `e` may be a string or Error object\n}\n```\n\n\u003ca name=\"nodejs-request-handler\"\u003e\u003c/a\u003e\n## Node.js Request Handler\n\nThe online barcode API is implemented as a Node.js application.\nSee the [Online Barcode API](https://github.com/metafloor/bwip-js/wiki/Online-Barcode-API) for details on how the URL query parameters must be structured.\n\nA working, minimal example of how to use the request handler can be found in\n`server.js`:\n\n```javascript\n// Simple HTTP server that renders barcode images using bwip-js.\nconst http   = require('http');\nconst bwipjs = require('bwip-js');\n\n// This shows how to load the Inconsolata font, supplied with the bwip-js distribution.\n// The path to your fonts will be different.\n//bwipjs.loadFont('Inconsolata', 100,\n//      require('fs').readFileSync('./fonts/Inconsolata.otf', 'binary'));\n\nhttp.createServer(function(req, res) {\n    // If the url does not begin /?bcid= then 404.  Otherwise, we end up\n    // returning 400 on requests like favicon.ico.\n    if (req.url.indexOf('/?bcid=') != 0) {\n        res.writeHead(404, { 'Content-Type':'text/plain' });\n        res.end('BWIPJS: Unknown request format.', 'utf8');\n    } else {\n        bwipjs.request(req, res); // Executes asynchronously\n    }\n\n}).listen(3030);\n```\n\nIf you run the above code on your local machine, you can test with the following URL:\n\n```\nhttp://localhost:3030/?bcid=isbn\u0026text=978-1-56581-231-4+52250\u0026includetext\u0026guardwhitespace\n```\n\nThe bwip-js request handler only operates on the URL query parameters and\nignores all path information.  Your application is free to structure the URL\npath as needed to implement the desired HTTP request routing.\n\n\u003ca name=\"nodejs-image-generator\"\u003e\u003c/a\u003e\n## Node.js Image Generator\n\nYou can use bwip-js to generate PNG images directly.\n\n```javascript\nconst bwipjs = require('bwip-js');\n\nbwipjs.toBuffer({\n    bcid:        'code128',       // Barcode type\n    text:        '0123456789',    // Text to encode\n    scale:       3,               // 3x scaling factor\n    height:      10,              // Bar height, in millimeters\n    includetext: true,            // Show human-readable text\n    textxalign:  'center',        // Always good to set this\n}, function (err, png) {\n    if (err) {\n        // `err` may be a string or Error object\n    } else {\n        // `png` is a Buffer\n        // png.length           : PNG file length\n        // png.readUInt32BE(16) : PNG image width\n        // png.readUInt32BE(20) : PNG image height\n    }\n});\n```\n\nIf you would prefer to work with Promises, omit the callback function and\n`toBuffer()` will return a Promise:\n\n```javascript\nbwipjs.toBuffer({\n    bcid:        'code128',       // Barcode type\n    text:        '0123456789',    // Text to encode\n    scale:       3,               // 3x scaling factor\n    height:      10,              // Bar height, in millimeters\n    includetext: true,            // Show human-readable text\n    textxalign:  'center',        // Always good to set this\n})\n.then(png =\u003e {\n    // `png` is a Buffer as in the example above\n})\n.catch(err =\u003e {\n    // `err` may be a string or Error object\n});\n```\n\n\u003ca name=\"nodejs-es6-module-usage\"\u003e\u003c/a\u003e\n## Node.js ES6 Module Usage\n\nThe ESM provides the same API as `require('bwip-js')` using:\n\n```javascript\nimport bwipjs from 'bwip-js';           // If using the main package import\n  // or\nimport bwipjs from '@bwip-js/node';     // Platform-specific package import\n\n// ... identical to the examples above ...\n```\n\nThe ESM also facilitates bundler tree-shaking by providing the individual encoders as named exports.  Each exported encoder functions identically to `bwipjs.toBuffer()`.\n\nThe exported names are the same as the `bcid` names, with the caveat that dashes `-` are replaced with underscores `_`.  For example, to import the `gs1-128` encoder, you would use:\n\n```javascript\nimport { gs1_128 } from 'bwip-js';\n  // or\nimport { gs1_128 } from '@bwip-js/node';\n\ntry {\n    let buf = await gs1_128(options);\n} catch (e) {\n    // `e` may be a string or Error object\n}\n```\n\nWhen named encoders are called, the `bcid` value in the options object is ignored.\n\n\u003ca name=\"svg-all-platforms\"\u003e\u003c/a\u003e\n## SVG (All Platforms) \n\nThe easiest way to generate an SVG barcode image is with the `toSVG()` method.  It takes\nthe same options object as the other rendering methods.\n\nThe method is synchronous.\n\n```javascript\nlet svg = bwipjs.toSVG({\n    bcid:        'code128',       // Barcode type\n    text:        '0123456789',    // Text to encode\n    height:      12,              // Bar height, in millimeters\n    includetext: true,            // Show human-readable text\n    textxalign:  'center',        // Always good to set this\n    textcolor:   'ff0000',        // Red text\n});\n```\n\nThe return value from `toSVG()` is a string containing a fully qualified SVG definition,\nincluding a `viewBox` attribute that defines the natural width and height of the image, in pixels.\n\n```\n\u003csvg viewBox=\"0 0 242 200\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n   ...\n\u003c/svg\u003e\n```\n\nThe `viewBox` will always have origin `0 0`.\n\nTo display in an HTML page, the following should provide a good start:\n\n```javascript\nlet [ , width, height ] = /viewBox=\"0 0 (\\d+) (\\d+)\"/.exec(svg);\nlet span = document.createElement('span');\nspan.style.display = 'inline-block';\nspan.style.width = width + 'px';\nspan.style.height = height + 'px';\nspan.innerHTML = svg;\ndocument.body.appendChild(span);\n```\n\nThe `toSVG()` method links to all BWIPP encoders, so it cannot be used with\ntree-shaking.  To reduce bundled size, you can import only the barcode types\nyou need, along with the built-in SVG drawing interface.\n\n```javascript\nimport { qrcode, drawingSVG } from 'bwip-js';\n  // or \u003cplatform\u003e one of : browser, node, react-native, generic\nimport { qrcode, drawingSVG } from '@bwip-js/\u003cplatform\u003e'; \n\n// drawingSVG() returns a bwip-js drawing object.\nlet svg = qrcode(options, drawingSVG());\n```\n\n\u003ca name=\"react-usage\"\u003e\u003c/a\u003e\n## React Usage\n\nThe following is a minimal example of bwip-js in a React app.\n\n```tsx\nimport bwipjs from 'bwip-js';           // If using the main package import\n// or\nimport bwipjs from '@bwip-js/browser';  // Platform-specific package import\n\nexport default function App() {\n  return (\n    \u003ccanvas\n      ref={(canvas) =\u003e {\n        if (!canvas) {\n          return;\n        }\n\n        bwipjs.toCanvas(canvas, {\n          bcid:        'code128',               // Barcode type\n          text:        '0123456789',            // Text to encode\n          scale:       window.devicePixelRatio, // Scaling factor for high-DPI devices\n          height:      10,                      // Bar height, in millimeters\n          includetext: true,                    // Show human-readable text\n          textxalign:  'center',                // Always good to set this\n        });\n      }}\n    /\u003e\n  );\n}\n```\n\nSee the Browser Usage section for details on the `toCanvas()` method. \n\nSee the ES6 Browser Module Usage section for details on importing encoders directly.\n\n\u003ca name=\"react-native\"\u003e\u003c/a\u003e\n## React Native\n\nWhen using React Native, it is recommended to install the react-native package `@bwip-js/react-native`. \n\nThe react-native module provides a specialized version of the `toBuffer()` method, \ncalled `toDataURL()`. The return value is an object with the following properties:\n\n- `height` : The height of the image, in pixels.\n- `width` : The width of the image, in pixels.\n- `uri` : A string containing the data URL for the image.\n\nThe returned object is designed to be used with the `\u003cImage\u003e` component:\n\n```tsx\nimport { useEffect, useState } from 'react';\nimport { Image, PixelRatio } from 'react-native';\nimport bwipjs, { type DataURL } from '@bwip-js/react-native';\n\nexport default function App() {\n  const [source, setSource] = useState\u003cDataURL\u003e();\n\n  useEffect(() =\u003e {\n    bwipjs.toDataURL({\n      bcid:        'code128',        // Barcode type\n      text:        '0123456789',     // Text to encode\n      scale:       PixelRatio.get(), // Scaling factor for high-DPI devices\n      height:      10,               // Bar height, in millimeters\n      includetext: true,             // Show human-readable text\n      textxalign:  'center',         // Always good to set this\n    }).then(setSource);\n  }, []);\n\n  if (!source) {\n    return null;\n  }\n\n  const { height, width, uri } = source;\n\n  return \u003cImage source={{ uri }} width={width} height={height} /\u003e;\n}\n```\n\nThe bwip-js exports also facilitate bundler tree-shaking by providing the individual encoders as named exports.  Each exported encoder functions identically to `bwipjs.toDataURL()`.\n\nThe exported names are the same as the `bcid` names, with the caveat that dashes `-` are replaced with underscores `_`.  For example, to import the `gs1-128` encoder, you would use:\n\n```javascript\nimport { gs1_128 } from '@bwip-js/react-native';\n\ntry {\n    let buf = await gs1_128(options);\n} catch (e) {\n    // `e` may be a string or Error object\n}\n```\n\nWhen named encoders are called, the `bcid` value in the options object is ignored.\n\n\u003ca name=\"electron-example\"\u003e\u003c/a\u003e\n## Electron Example\n\nWith electron, you have the choice to use either the node-specific or browser-specific package.  It is not recommended to use the main bwip-js package as developers have reported issues with how the bundler interacts with the package exports.\n\nThis is an example `index.html` file for a basic, single window app, using the node-js package:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eHello World!\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    Node.js \u003cscript\u003edocument.write(process.versions.node)\u003c/script\u003e,\n    Chromium \u003cscript\u003edocument.write(process.versions.chrome)\u003c/script\u003e,\n    Electron \u003cscript\u003edocument.write(process.versions.electron)\u003c/script\u003e,\n    bwip-js \u003cscript\u003edocument.write(bwipjs.BWIPJS_VERSION)\u003c/script\u003e,\n    and BWIPP \u003cscript\u003edocument.write(bwipjs.BWIPP_VERSION)\u003c/script\u003e.\n    \u003cbr\u003e\u003cbr\u003e\u003cimg id=\"myimg\"\u003e\n    \u003cpre id=\"output\"\u003e\u003c/pre\u003e\n  \u003c/body\u003e\n\n  \u003cscript\u003e\n    var bwipjs = require('@bwip-js/node');\n    bwipjs.toBuffer({ bcid:'qrcode', text:'0123456789' }, function (err, png) {\n        if (err) {\n          document.getElementById('output').textContent = err;\n        } else {\n          document.getElementById('myimg').src = 'data:image/png;base64,' +\n                                                 png.toString('base64');\n        }\n      });\n  \u003c/script\u003e\n\u003c/html\u003e\n```\n\n\u003ca name=\"command-line-interface\"\u003e\u003c/a\u003e\n## Command Line Interface\n\nbwip-js can be used as a command line tool when installed globally:\n\n```\n$ npm install -g bwip-js\n$ bwip-js\nUsage: bwip-js symbol-name text [options...] file-name\n       bwip-js --bcid=symbol-name --text=text [options...] file-name\n\nExample:\n       bwip-js code128 012345678 includetext textcolor=ff0000 my-code128.png\n\nfile-name must be type: .png or .svg\n\nTry 'bwip-js --help' for more information.\nTry 'bwip-js --symbols' for a list of supported barcode symbols.\n```\n\nTo use a custom font with the command line utility, use the `--loadfont` option.  It\ntakes one of three formats:\n\n`--loadfont=`_font-name_`,`_y-mult_`,`_x-mult_`,`_path-to-font-file_ \u003cbr\u003e\n`--loadfont=`_font-name_`,`_size-mult_`,`_path-to-font-file_ \u003cbr\u003e\n`--loadfont=`_font-name_`,`_path-to-font-file_ \u003cbr\u003e\n\nFor example:\n\n```\n$ bwip-js code128 12345678 includetext textfont=CONS textxalign=center \\\n  loadfont=CONS,250,100,../fonts/Inconsolata.otf /tmp/code128.png\n```\n\nThe above demonstrates how to maniplulate the font metrics so the characters appear\ntall and narrow.\n\n\n\u003ca name=\"demo-html-app\"\u003e\u003c/a\u003e\n## Demo HTML App\n\n`demo.html` located in the root bwip-js directory is a full featured demonstation\nof bwip-js barcode rendering.  It uses bwip-js' built-in graphics to draw to a canvas.\nThe images produced will match pixel-for-pixel with the images produced by the same\nnodejs usage.\n\n\n\u003ca name=\"examples\"\u003e\u003c/a\u003e\n## Examples\n\nThere are example html and node apps provided with the project including\nhow to write your own drawing interface, generating SVG barcode images, \nand adding scalable barcodes to a [pdfkit](https://pdfkit.org/) document.\n\nSee the examples [README](https://github.com/metafloor/bwip-js/tree/master/examples) \nfor more details.\n\n\n## Supported Barcode Types\n\n * auspost \u0026#x2022; AusPost 4 State Customer Code\n * azteccode \u0026#x2022; Aztec Code\n * azteccodecompact \u0026#x2022; Compact Aztec Code\n * aztecrune \u0026#x2022; Aztec Runes\n * bc412 \u0026#x2022; BC412\n * channelcode \u0026#x2022; Channel Code\n * codablockf \u0026#x2022; Codablock F\n * code11 \u0026#x2022; Code 11\n * code128 \u0026#x2022; Code 128\n * code16k \u0026#x2022; Code 16K\n * code2of5 \u0026#x2022; Code 25\n * code32 \u0026#x2022; Italian Pharmacode\n * code39 \u0026#x2022; Code 39\n * code39ext \u0026#x2022; Code 39 Extended\n * code49 \u0026#x2022; Code 49\n * code93 \u0026#x2022; Code 93\n * code93ext \u0026#x2022; Code 93 Extended\n * codeone \u0026#x2022; Code One\n * coop2of5 \u0026#x2022; COOP 2 of 5\n * daft \u0026#x2022; Custom 4 state symbology\n * databarexpanded \u0026#x2022; GS1 DataBar Expanded\n * databarexpandedcomposite \u0026#x2022; GS1 DataBar Expanded Composite\n * databarexpandedstacked \u0026#x2022; GS1 DataBar Expanded Stacked\n * databarexpandedstackedcomposite \u0026#x2022; GS1 DataBar Expanded Stacked Composite\n * databarlimited \u0026#x2022; GS1 DataBar Limited\n * databarlimitedcomposite \u0026#x2022; GS1 DataBar Limited Composite\n * databaromni \u0026#x2022; GS1 DataBar Omnidirectional\n * databaromnicomposite \u0026#x2022; GS1 DataBar Omnidirectional Composite\n * databarstacked \u0026#x2022; GS1 DataBar Stacked\n * databarstackedcomposite \u0026#x2022; GS1 DataBar Stacked Composite\n * databarstackedomni \u0026#x2022; GS1 DataBar Stacked Omnidirectional\n * databarstackedomnicomposite \u0026#x2022; GS1 DataBar Stacked Omnidirectional Composite\n * databartruncated \u0026#x2022; GS1 DataBar Truncated\n * databartruncatedcomposite \u0026#x2022; GS1 DataBar Truncated Composite\n * datalogic2of5 \u0026#x2022; Datalogic 2 of 5\n * datamatrix \u0026#x2022; Data Matrix\n * datamatrixrectangular \u0026#x2022; Data Matrix Rectangular\n * datamatrixrectangularextension \u0026#x2022; Data Matrix Rectangular Extension\n * dotcode \u0026#x2022; DotCode\n * ean13 \u0026#x2022; EAN-13\n * ean13composite \u0026#x2022; EAN-13 Composite\n * ean14 \u0026#x2022; EAN-14\n * ean2 \u0026#x2022; EAN-2 (2 digit addon)\n * ean5 \u0026#x2022; EAN-5 (5 digit addon)\n * ean8 \u0026#x2022; EAN-8\n * ean8composite \u0026#x2022; EAN-8 Composite\n * flattermarken \u0026#x2022; Flattermarken\n * gs1-128 \u0026#x2022; GS1-128\n * gs1-128composite \u0026#x2022; GS1-128 Composite\n * gs1-cc \u0026#x2022; GS1 Composite 2D Component\n * gs1datamatrix \u0026#x2022; GS1 Data Matrix\n * gs1datamatrixrectangular \u0026#x2022; GS1 Data Matrix Rectangular\n * gs1dldatamatrix \u0026#x2022; GS1 Digital Link Data Matrix\n * gs1dlqrcode \u0026#x2022; GS1 Digital Link QR Code\n * gs1dotcode \u0026#x2022; GS1 DotCode\n * gs1northamericancoupon \u0026#x2022; GS1 North American Coupon\n * gs1qrcode \u0026#x2022; GS1 QR Code\n * hanxin \u0026#x2022; Han Xin Code\n * hibcazteccode \u0026#x2022; HIBC Aztec Code\n * hibccodablockf \u0026#x2022; HIBC Codablock F\n * hibccode128 \u0026#x2022; HIBC Code 128\n * hibccode39 \u0026#x2022; HIBC Code 39\n * hibcdatamatrix \u0026#x2022; HIBC Data Matrix\n * hibcdatamatrixrectangular \u0026#x2022; HIBC Data Matrix Rectangular\n * hibcmicropdf417 \u0026#x2022; HIBC MicroPDF417\n * hibcpdf417 \u0026#x2022; HIBC PDF417\n * hibcqrcode \u0026#x2022; HIBC QR Code\n * iata2of5 \u0026#x2022; IATA 2 of 5\n * identcode \u0026#x2022; Deutsche Post Identcode\n * industrial2of5 \u0026#x2022; Industrial 2 of 5\n * interleaved2of5 \u0026#x2022; Interleaved 2 of 5 (ITF)\n * isbn \u0026#x2022; ISBN\n * ismn \u0026#x2022; ISMN\n * issn \u0026#x2022; ISSN\n * itf14 \u0026#x2022; ITF-14\n * japanpost \u0026#x2022; Japan Post 4 State Customer Code\n * kix \u0026#x2022; Royal Dutch TPG Post KIX\n * leitcode \u0026#x2022; Deutsche Post Leitcode\n * mailmark \u0026#x2022; Royal Mail Mailmark\n * mands \u0026#x2022; Marks \u0026 Spencer\n * matrix2of5 \u0026#x2022; Matrix 2 of 5\n * maxicode \u0026#x2022; MaxiCode\n * micropdf417 \u0026#x2022; MicroPDF417\n * microqrcode \u0026#x2022; Micro QR Code\n * msi \u0026#x2022; MSI Modified Plessey\n * onecode \u0026#x2022; USPS Intelligent Mail\n * pdf417 \u0026#x2022; PDF417\n * pdf417compact \u0026#x2022; Compact PDF417\n * pharmacode \u0026#x2022; Pharmaceutical Binary Code\n * pharmacode2 \u0026#x2022; Two-track Pharmacode\n * planet \u0026#x2022; USPS PLANET\n * plessey \u0026#x2022; Plessey UK\n * posicode \u0026#x2022; PosiCode\n * postnet \u0026#x2022; USPS POSTNET\n * pzn \u0026#x2022; Pharmazentralnummer (PZN)\n * qrcode \u0026#x2022; QR Code\n * rationalizedCodabar \u0026#x2022; Codabar\n * raw \u0026#x2022; Custom 1D symbology\n * rectangularmicroqrcode \u0026#x2022; Rectangular Micro QR Code\n * royalmail \u0026#x2022; Royal Mail 4 State Customer Code\n * sscc18 \u0026#x2022; SSCC-18\n * swissqrcode \u0026#x2022; Swiss QR Code\n * symbol \u0026#x2022; Miscellaneous symbols\n * telepen \u0026#x2022; Telepen\n * telepennumeric \u0026#x2022; Telepen Numeric\n * ultracode \u0026#x2022; Ultracode\n * upca \u0026#x2022; UPC-A\n * upcacomposite \u0026#x2022; UPC-A Composite\n * upce \u0026#x2022; UPC-E\n * upcecomposite \u0026#x2022; UPC-E Composite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafloor%2Fbwip-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetafloor%2Fbwip-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafloor%2Fbwip-js/lists"}