express-image-placeholder - npm Package Compare versions

Comparing version 3.0.0 to 4.0.2

index.js

@@ -5,2 +5,3 @@ /**
 const { createCanvas } = require('canvas');
+const Color = require('color');
 const HttpError = require('http-errors');
@@ -11,10 +12,11 @@
  */
-const ColorPreset = require('./lib/ColorPreset');
 const ImageFormat = require('./lib/ImageFormat');
 const Utils = require('./lib/Utils');
 
+const BORDER_WIDTH = 2;
 const CROSS_CHARACTER = '\u{02A2F}';
+const DARK_RATIO = 0.5;
+const DOUBLE_BORDER_WIDTH = BORDER_WIDTH * 2;
 const FONT_SIZE = 18;
-const LINE_WIDTH = 2;
-const DOUBLE_LINE_WIDTH = LINE_WIDTH * 2;
+const LABEL_BACKGROUND_OFFSET = 8;
 
@@ -29,3 +31,3 @@ module.exports = (req, res, next) => {
 		border = false,
-		color = 'GRAY',
+		color = '#9E9E9E',
 		cross = false,
@@ -44,5 +46,8 @@ format = 'png',
 	{
-		const colorPalette = ColorPreset[color.toUpperCase()];
-		if (!colorPalette) {
-			return next(new HttpError.BadRequest());
+		let primaryColor = null, secondaryColor = null;
+		try {
+			primaryColor = Color(color).hex();
+			secondaryColor = Color(color).darken(DARK_RATIO).hex();
+		} catch (error) {
+			return next(error);
 		}
@@ -53,9 +58,9 @@
 		if (border) {
-			ctx.fillStyle = colorPalette.dark;
+			ctx.fillStyle = secondaryColor;
 			ctx.fillRect(0, 0, width, height);
 
-			ctx.fillStyle = colorPalette.light;
-			ctx.fillRect(LINE_WIDTH, LINE_WIDTH, width - DOUBLE_LINE_WIDTH, height - DOUBLE_LINE_WIDTH);
+			ctx.fillStyle = primaryColor;
+			ctx.fillRect(BORDER_WIDTH, BORDER_WIDTH, width - DOUBLE_BORDER_WIDTH, height - DOUBLE_BORDER_WIDTH);
 		} else {
-			ctx.fillStyle = colorPalette.light;
+			ctx.fillStyle = primaryColor;
 			ctx.fillRect(0, 0, width, height);
@@ -65,8 +70,8 @@ }
 		if (cross) {
-			ctx.strokeStyle = colorPalette.dark;
+			ctx.strokeStyle = secondaryColor;
 			ctx.lineWidth = 1;
 
 			ctx.beginPath();
-			ctx.moveTo(-LINE_WIDTH, 0);
-			ctx.lineTo(width + LINE_WIDTH, height);
+			ctx.moveTo(0, 0);
+			ctx.lineTo(width, height);
 			ctx.closePath();
@@ -76,4 +81,4 @@ ctx.stroke();
 			ctx.beginPath();
-			ctx.moveTo(width + LINE_WIDTH, 0);
-			ctx.lineTo(-LINE_WIDTH, height);
+			ctx.moveTo(width, 0);
+			ctx.lineTo(0, height);
 			ctx.closePath();
@@ -84,11 +89,11 @@ ctx.stroke();
 		if (label) {
-			ctx.fillStyle = colorPalette.light;
+			ctx.fillStyle = primaryColor;
 			ctx.fillRect(
-				LINE_WIDTH,
-				(height - FONT_SIZE) / 2 - LINE_WIDTH,
-				width - DOUBLE_LINE_WIDTH,
-				FONT_SIZE + DOUBLE_LINE_WIDTH
+				0 + BORDER_WIDTH,
+				(height - FONT_SIZE) / 2 - LABEL_BACKGROUND_OFFSET,
+				width - DOUBLE_BORDER_WIDTH,
+				FONT_SIZE + 2 * LABEL_BACKGROUND_OFFSET
 			);
 
-			ctx.fillStyle = colorPalette.dark;
+			ctx.fillStyle = secondaryColor;
 			ctx.font = `bold ${FONT_SIZE}px Arial, Helvetica, sans-serif`;
@@ -95,0 +100,0 @@ ctx.textAlign = 'center';

lib/Utils.js

@@ -10,6 +10,2 @@ const urlParamToBoolean = param => param === 'true' || param === '1' ? true : false;
 
-	if (color) {
-		params.color = color.toUpperCase()
-	}
-
 	if (cross !== undefined) {
@@ -16,0 +12,0 @@ params.cross = urlParamToBoolean(cross);

package.json

 {
   "name": "express-image-placeholder",
-  "version": "3.0.0",
+  "version": "4.0.2",
   "description": "Express router-level middleware for delivering simple test images.",
@@ -14,2 +14,5 @@ "main": "index.js",
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "keywords": [
@@ -28,2 +31,3 @@ "express",
     "canvas": "2.1.x",
+    "color": "3.1.x",
     "http-errors": "1.7.x"
@@ -30,0 +34,0 @@ },

README.md

 # express-image-placeholder
 
-Express middleware for delivering simple test images. Only dependencies are `canvas` and `express`.
+Express middleware for delivering simple test images.
 
@@ -13,6 +13,6 @@ ## Usage
 
-- `border` - Renders border. Value is `true`||`1` or anything else for false. Defaults to `false`.
-- `color` - Should be one of preset colors (`amber`, `blue_gray`, `blue`, `brown`, `cyan`, `deep_orange`, `deep_purple`, `gray`, `green`, `indigo`, `light_blue`, `light_green`, `lime`, `orange`, `pink`, `purple`, `red`, `teal`, `yellow`). Defaults to `gray` preset.
-- `cross` - Diagonal lines. Value is `true`||`1` or anything else for false. Defaults to `false`.
-- `format` - Supported formats ale JPG, PDF, PNG and SVG. Defaults to PNG.
+- `border` - Renders border. Value is `true` || `1` or anything else for false. Defaults to `false`.
+- `color` - Should be valid color string (https://www.npmjs.com/package/color-string). Defaults to `#9E9E9E` color.
+- `cross` - Diagonal lines. Value is `true` || `1` or anything else for false. Defaults to `false`.
+- `format` - Supported formats are JPG, PDF, PNG and SVG. Defaults to PNG.
 - `label` - Custom label fo your image. If not provided, label is WIDTH⨯HEIGHT.
@@ -30,6 +30,6 @@
 
-![Sample gray image without border and cross.](600x200g.png?raw=true)
+![Sample gray image without border and cross.](600x200.png?raw=true)
 
-![Sample blue image with border and cross.](600x200cbb.png?raw=true)
+![Sample blue image with border and cross.](600x200bb.png?raw=true)
 
 

No alert changes

Worsened metrics

Total package byte prevSize

12082

decreased by-32.62%

Dependency count

3

increased by50%

Number of package files

9

decreased by-18.18%

Lines of code

146

decreased by-20.22%

Dependency changes

• + Addedcolor@3.1.x

• + Addedcolor@3.1.4(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)