Merge pull request #20 from adrienv1520/feature/transparent-background

feature/transparent-background

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 1.2.0 - delivery @15/01/2020
+
+- add opacity and bgOpacity options
+- add opacity and bgOpacity to helpers.barcode.digitToSvg svg generation algorithm
+- update default settings
+- update Readme and doc examples
+
 ## 1.1.5 - delivery @15/01/2020
 
 - add "files" key to package.json to lighten npm package

README.md

@@ -36,7 +36,7 @@
 
 Despite the fact that [bwipjs](https://github.com/metafloor/bwip-js) can generate a lot of barcodes and other libraries exist, I personally needed to generate the same ECC 200 compliant Datamatrixes from the *barcode* library and it was not possible by any of these libraries. Plus I had some issues with architecture-dependent image processor libraries used by other modules.
 
-*Bitgener* generates barcodes in pure SVG (Scalable Vector Graphics) format. The barcode generated can be a buffer, a readable stream, a string representing svg tags content or a file. It adds features as fixing final image width and height, keeping the original 1D/2D size, adding paddings and a generic font family for hri, adding stream, buffer and file outputs with a specific encoding.
+*Bitgener* generates barcodes in pure SVG (Scalable Vector Graphics) format. The barcode generated can be a buffer, a readable stream, a string representing svg tags content or a file. It adds features like background and bars opacity, fixing final image width and height, keeping the original 1D/2D size, adding paddings and a generic font family for hri, adding stream, buffer and file outputs with a specific encoding.
 
 SVGs generated by *Bitgener* uses crisp edges shape rendering to tell the user agent to turn off anti-aliasing to preserved the contrast, colors and edges without any smoothing or blurring that applies to images scaled up or down. Browsers support is nice and can be found here: https://caniuse.com/#feat=css-crisp-edges.
 
@@ -121,8 +121,10 @@ const bitgener = require('bitgener');
     - `original1DSize` **<Boolean\>** If true keep the original 1D barcode size determined by barWidth and barHeight else apply the specified width and height sizes to the final image. *Default*: `false`
     - `original2DSize` **<Boolean\>** For rectangular datamatrixes, if true keep the original 2D barcode size based on width else apply the specified width and height sizes to the final image. *Default*: `false`
     - `addQuietZone` **<Boolean\>** Add a quiet zone at the end of 1D barcodes. *Default*: `true`
-    - `color` **<String\>** The bars color. An hexadecimal value or one of these [generic names](lib/helpers/color.js). *Default*: `#000000`
+    - `color` **<String\>** The bars and hri color. An hexadecimal value or one of these [generic names](lib/helpers/color.js). *Default*: `#000000`
+    - `opacity` **<Number\>** The bars and hri opacity. *Min*: `0` *Max*: `1` *Default*: `1`
     - `bgColor` **<String\>** The background color. An hexadecimal value or one of these [generic names](lib/helpers/color.js). *Default*: `#FFFFFF`
+    - `bgOpacity` **<Number\>** The background opacity. *Min*: `0` *Max*: `1` *Default*: `1`
     - `hri` **<Object\>** The human readable interpretation of the encoded data.
       - `show` **<Boolean\>** *Default*: `true`
       - `fontFamily` **<String\>** A generic font name based on [cssfontstack.com](cssfontstack.com) *Default*: `Arial`
@@ -213,7 +215,9 @@ const bitgener = require('bitgener');
       original1DSize: true,
       addQuietZone: true,
       color: '#FFFFFF',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 0.1,
       hri: {
         show: true,
         fontFamily: 'Futura',
@@ -247,7 +251,9 @@ const bitgener = require('bitgener');
       height: 250,
       original2DSize: false,
       color: '#FFFFFF',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 1,
       hri: {
         show: true,
         fontFamily: 'Courier New',
@@ -334,7 +340,9 @@ const convert = async function convert({
       height: 250,
       original2DSize: false,
       color: '#FFFFFF',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 1,
       hri: {
         show: true,
         fontFamily: 'Courier New',
@@ -516,7 +524,7 @@ See [TODO](TODO.md "TODO") file.
 
 *Bitgener* is released under the MIT license.
 
-Copyright (C) 2019 Adrien Valcke
+Copyright (C) 2020 Adrien Valcke
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

doc/examples/1d.js

@@ -14,7 +14,9 @@ const bitgener = require('../../lib');
       original1DSize: true,
       addQuietZone: true,
       color: '#FFFFFF',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 0.1,
       hri: {
         show: true,
         fontFamily: 'Futura',

doc/examples/2d.js

@@ -13,8 +13,10 @@ const bitgener = require('../../lib');
       width: 250,
       height: 250,
       original2DSize: false,
-      color: '#FFFFFF',
+      color: 'black',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 0,
       hri: {
         show: true,
         fontFamily: 'Courier New',

doc/examples/sharp.js

@@ -66,7 +66,9 @@ const convert = async function convert({
       height: 250,
       original2DSize: false,
       color: '#FFFFFF',
+      opacity: 1,
       bgColor: '#F7931A',
+      bgOpacity: 1,
       hri: {
         show: true,
         fontFamily: 'Courier New',

lib/helpers/barcode.js

@@ -278,12 +278,12 @@ const digitToSvg = function digitToSvg({
   let svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="${width}" height="${height}" shape-rendering="crispEdges">`;
 
   // background
-  svg += `<rect width="${width}" height="${height}" x="0" y="0" fill="${settings.bgColor}" />`;
+  svg += `<rect width="${width}" height="${height}" x="0" y="0" fill="${settings.bgColor}" opacity="${settings.bgOpacity}" />`;
 
   // center the code depending on padding width and padding height
   svg += `<g transform="translate(${floor(paddingWidth / 2)} ${floor(paddingHeight / 2)})">`;
 
-  const bar = `<rect width="&W" height="${moduleHeight}" x="&X" y="&Y" fill="${settings.color}" />`;
+  const bar = `<rect width="&W" height="${moduleHeight}" x="&X" y="&Y" fill="${settings.color}" opacity="${settings.opacity}"  />`;
 
   for (let y = 0, len = 0; y < lines; y += 1) {
     let currentDigit = digitToConvert[y][0];
@@ -312,7 +312,7 @@ const digitToSvg = function digitToSvg({
      * font-size-adjust="0.72" to be added below when font-size-adjust will be supported
      * by all browser and remove the fontSizeRatio calculation
      */
-    svg += `<text text-anchor="middle" lengthAdjust="spacingAndGlyphs" style="font-family: '${settings.hri.fontFamily}'; font-size: ${fontSize * fontSizeRatio}px;" fill="${settings.color}">${hri}</text>`;
+    svg += `<text text-anchor="middle" lengthAdjust="spacingAndGlyphs" style="font-family: '${settings.hri.fontFamily}'; font-size: ${fontSize * fontSizeRatio}px;" fill="${settings.color}" opacity="${settings.opacity}">${hri}</text>`;
     svg += '</g>';
   }
 

lib/index.js

@@ -43,31 +43,35 @@ const {
 const { floor, min, max } = Math;
 
 /**
+ * @func bitgener
+ *
  * Encode data into the specificied barcode type.
- * @param  {String} data             [data to encode]
- * @param  {String} type             [the supported symbology in which data will be encoded]
- * @param  {String} output           [file path with .svg extension, buffer, stream,
- *                                   string representing svg element]
- * @param  {String} encoding         [encoding for stream, buffer and file outputs]
- * @param  {Boolean} crc             [cyclic redundancy check]
- * @param  {Boolean} rectangular     [rectangular option for datamatrix]
- * @param  {Number} padding          [the space in pixels around one side of the
- *                                   barcode that will be applied for its 4 sides]
- * @param  {Number} width            [the width in pixels to fix for the generated image]
- * @param  {Number} height           [the height in pixels to fix for the generated image]
- * @param  {Number} barWidth         [the bar width in pixels for 1D barcodes]
- * @param  {Number} barHeight        [he bar height in pixels for 1D barcodes]
- * @param  {Boolean} original1DSize  [option to keep the original 1D barcode size]
- * @param  {Boolean} original2DSize  [option to keep the original 2D barcode size based on width]
- * @param  {Boolean} addQuietZone    [option to add a quiet zone at the end of 1D barcodes]
- * @param  {String} color            [the bars color]
- * @param  {String} bgColor          [the background color]
- * @param  {Object} hri              [human readable interpretation]
- * @param  {Boolean} hri.show        [whether to show hri]
- * @param  {Number} hri.fontFamily   [a generic font name based on cssfontstack.com]
- * @param  {Number} hri.fontSize     [the font size in pixels]
- * @param  {Number} hri.marginTop    [the margin size in pixels between the barcode bottom and
- *                                   the hri text]
+ * @param  {String} data             data to encode
+ * @param  {String} type             the supported symbology in which data will be encoded
+ * @param  {String} output           file path with .svg extension, buffer, stream,
+ *                                   string representing svg element
+ * @param  {String} encoding         encoding for stream, buffer and file outputs
+ * @param  {Boolean} crc             cyclic redundancy check
+ * @param  {Boolean} rectangular     rectangular option for datamatrix
+ * @param  {Number} padding          the space in pixels around one side of the
+ *                                   barcode that will be applied for its 4 sides
+ * @param  {Number} width            the width in pixels to fix for the generated image
+ * @param  {Number} height           the height in pixels to fix for the generated image
+ * @param  {Number} barWidth         the bar width in pixels for 1D barcodes
+ * @param  {Number} barHeight        he bar height in pixels for 1D barcodes
+ * @param  {Boolean} original1DSize  option to keep the original 1D barcode size
+ * @param  {Boolean} original2DSize  option to keep the original 2D barcode size based on width
+ * @param  {Boolean} addQuietZone    option to add a quiet zone at the end of 1D barcodes
+ * @param  {String} color            the bars color
+ * @param  {Number} opacity          the bars opacity
+ * @param  {String} bgColor          the background color
+ * @param  {Number} bgOpacity        the background opacity
+ * @param  {Object} hri              human readable interpretation
+ * @param  {Boolean} hri.show        whether to show hri
+ * @param  {Number} hri.fontFamily   a generic font name based on cssfontstack.com
+ * @param  {Number} hri.fontSize     the font size in pixels
+ * @param  {Number} hri.marginTop    the margin size in pixels between the barcode bottom and
+ *                                   the hri text
  */
 const bitgener = async function bitgener({
   data,
@@ -85,7 +89,9 @@ const bitgener = async function bitgener({
   original2DSize,
   addQuietZone,
   color,
+  opacity,
   bgColor,
+  bgOpacity,
   hri,
 } = {}) {
   // check data is not missing or empty
@@ -192,11 +198,25 @@ const bitgener = async function bitgener({
     settings.color = color;
   }
 
+  // opacity
+  const opacityValue = num(opacity, { ge: 0, le: 1 });
+
+  if (exists(opacityValue)) {
+    settings.opacity = opacityValue;
+  }
+
   // bgColor
   if (isColor(bgColor)) {
     settings.bgColor = bgColor;
   }
 
+  // bgOpacity
+  const bgOpacityValue = num(bgOpacity, { ge: 0, le: 1 });
+
+  if (exists(bgOpacityValue)) {
+    settings.bgOpacity = bgOpacityValue;
+  }
+
   // hri
   if (is(Object, hri)) {
     // show

lib/settings/defaults.js

@@ -12,7 +12,9 @@ const defaults = {
   original2DSize: false,
   addQuietZone: true,
   color: '#000000',
+  opacity: 1,
   bgColor: '#FFFFFF',
+  bgOpacity: 1,
   hri: {
     show: true,
     fontFamily: 'Arial',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitgener",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "A lightweight and zero-dependencies pure Node.js barcode library",
   "author": "Adrien Valcke",
   "main": "lib/index.js",