@igxjs/text2png 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# Text to PNG
+
+We upgraded the `node-canvas` to latest in order to support Node.js v24+.
+
+```js
+text2png('Create png image\nfrom multi-line text!');
+```
+
+![text2png](./img/text2png.png)
+
+## Quick start
+
+text2png depends on [node-canvas](https://github.com/Automattic/node-canvas).
+See [node-canvas wiki](https://github.com/Automattic/node-canvas/wiki) on installing node-canvas.
+
+```
+$ npm install @igxjs/text2png
+```
+
+```js
+const fs = require('fs');
+const text2png = require('text2png');
+fs.writeFileSync('out.png', text2png('Hello!', { color: 'blue' }));
+```
+
+## Option
+
+``text2png(text, option)``
+
+|param|default|
+|---|---|
+|text|(required)|
+|option.font|'30px sans-serif'|
+|option.textAlign|'left'|
+|option.color (or option.textColor)|'black'|
+|option.backgroundColor (or option.bgColor)|'transparent'|
+|option.lineSpacing|0|
+|option.strokeWidth|0|
+|option.strokeColor|'white'|
+|option.padding|0|
+|option.padding(Left\|Top\|Right\|Bottom)|0|
+|option.borderWidth|0|
+|option.border(Left\|Top\|Right\|Bottom)Width|0|
+|option.borderColor|'black'|
+|option.localFontPath||
+|option.localFontName||
+|option.output|'buffer'|
+
+``option.color = '#000' | 'rgb(0, 0, 0)' | 'black' | ...``
+
+``option.output = 'buffer' | 'stream' | 'dataURL' | 'canvas'``
+
+``option.strokeWidth = 1 | 2 | ... `` A padding may have to be set to avoid cutoff of stroke
+
+``'canvas'`` returns [node-canvas](https://github.com/Automattic/node-canvas) object.
+
+If you want to use any custom fonts without installing, use `localFontPath` and `localFontName` property.
+
+```js
+text2png('with custom fonts', {
+  font: '50px Lobster',
+  localFontPath: 'fonts/Lobstar-Regular.ttf',
+  localFontName: 'Lobster'
+});
+```
+
+## Command line interface
+
+```
+$ npm install -g text2png
+$ text2png --help
+$ text2png -t "Hello!" -o "output.png"
+```
+
+## Example
+
+```js
+text2png('Example\nText', {
+  font: '80px Futura',
+  color: 'teal',
+  backgroundColor: 'linen',
+  lineSpacing: 10,
+  padding: 20
+});
+```
+
+![ExampleText](./img/exampleText.png)
+
+Enjoy!

package/bin/text2png.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const commander = require("commander");
+const version = require("../package.json").version;
+const text2png = require("../index.js");
+
+commander
+  .version(version)
+  .description("Create png image from text.")
+  .option("-t, --text <message>", "text")
+  .option("-o, --output <path>", "output file path")
+  .option("-f, --font <string>", 'css font option (e.g. "30px Lobster")')
+  .option("-a, --textAlign <textAlign>", "text alignment")
+  .option("-c, --color <color>", "text color")
+  .option("-b, --backgroundColor <color>", "background color")
+  .option("-s, --lineSpacing <number>", "line spacing")
+
+  .option("--strokeWidth <number>", "stroke width")
+  .option("--strokeColor <number>", "stroke color")
+
+  .option(
+    "-p, --padding <number>",
+    "width of the padding area (left, top, right, bottom)"
+  )
+  .option("--paddingLeft <number>")
+  .option("--paddingTop <number>")
+  .option("--paddingRight <number>")
+  .option("--paddingBottom <number>")
+
+  .option(
+    "--borderWidth <number>",
+    "width of border (left, top, right, bottom)"
+  )
+  .option("--borderLeftWidth <number>")
+  .option("--borderTopWidth <number>")
+  .option("--borderRightWidth <number>")
+  .option("--borderBottomWidth <number>")
+  .option("--borderColor <color>", "border color")
+
+  .option(
+    "--localFontPath <path>",
+    "path to local font (e.g. fonts/Lobster-Regular.ttf)"
+  )
+  .option("--localFontName <name>", "name of local font (e.g. Lobster)")
+
+  .parse(process.argv);
+
+const exec = text => {
+  if ((commander.text || text) && commander.output) {
+    const stream = text2png(commander.text || text, {
+      font: commander.font,
+      textAlign: commander.textAlign,
+      color: commander.color,
+      backgroundColor: commander.backgroundColor,
+      lineSpacing: commander.lineSpacing && +commander.lineSpacing,
+
+      padding: commander.padding && +commander.padding,
+      paddingLeft: commander.paddingLeft && +commander.paddingLeft,
+      paddingTop: commander.paddingTop && +commander.paddingTop,
+      paddingRight: commander.paddingRight && +commander.paddingRight,
+      paddingBottom: commander.paddingBottom && +commander.paddingBottom,
+
+      borderWidth: commander.borderWidth && +commander.borderWidth,
+      borderLeftWidth: commander.borderLeftWidth && +commander.borderLeftWidth,
+      borderTopWidth: commander.borderTopWidth && +commander.borderTopWidth,
+      borderRightWidth:
+        commander.borderRightWidth && +commander.borderRightWidth,
+      borderBottomWidth:
+        commander.borderBottomWidth && +commander.borderBottomWidth,
+      borderColor: commander.borderColor,
+
+      localFontPath: commander.localFontPath,
+      localFontName: commander.localFontName,
+
+      output: "stream"
+    });
+    const outputPath = path.resolve(process.cwd(), commander.output);
+    stream.pipe(fs.createWriteStream(outputPath));
+  } else {
+    commander.outputHelp();
+  }
+};
+
+if (process.stdin.isTTY) {
+  exec();
+} else {
+  let input = "";
+  process.stdin.resume();
+  process.stdin.setEncoding("utf8");
+  process.stdin.on("data", function(chunk) {
+    input += chunk;
+  });
+  process.stdin.on("end", function() {
+    exec(input);
+  });
+}

package/index.js

@@ -0,0 +1,213 @@
+const { registerFont, createCanvas } = require("canvas");
+
+/**
+ * Convert text to PNG image.
+ * @param text
+ * @param [options]
+ * @param [options.font="30px sans-serif"] css style font
+ * @param [options.textAlign="left"] text alignment (left, center, right)
+ * @param [options.color="black"] (or options.textColor) text color
+ * @param [options.backgroundColor] (or options.bgColor) background color
+ * @param [options.lineSpacing=0]
+ * @param [options.strokeWidth=0]
+ * @param [options.strokeColor='white']
+ * @param [options.padding=0] width of the padding area (left, top, right, bottom)
+ * @param [options.paddingLeft]
+ * @param [options.paddingTop]
+ * @param [options.paddingRight]
+ * @param [options.paddingBottom]
+ * @param [options.borderWidth=0] width of border (left, top, right, bottom)
+ * @param [options.borderLeftWidth=0]
+ * @param [options.borderTopWidth=0]
+ * @param [options.borderRightWidth=0]
+ * @param [options.borderBottomWidth=0]
+ * @param [options.borderColor="black"] border color
+ * @param [options.localFontPath] path to local font (e.g. fonts/Lobster-Regular.ttf)
+ * @param [options.localFontName] name of local font (e.g. Lobster)
+ * @param [options.output="buffer"] 'buffer', 'stream', 'dataURL', 'canvas's
+ * @returns {string} png image buffer
+ */
+const text2png = (text, options = {}) => {
+  // Options
+  options = parseOptions(options);
+
+  // Register a custom font
+  if (options.localFontPath && options.localFontName) {
+    registerFont(options.localFontPath, { family: options.localFontName });
+  }
+
+  const canvas = createCanvas(0, 0);
+  const ctx = canvas.getContext("2d");
+
+  const max = {
+    left: 0,
+    right: 0,
+    ascent: 0,
+    descent: 0
+  };
+
+  let lastDescent;
+  const lineProps = text.split("\n").map(line => {
+    ctx.font = options.font;
+    const metrics = ctx.measureText(line);
+
+    const left = -1 * metrics.actualBoundingBoxLeft;
+    const right = metrics.actualBoundingBoxRight;
+    const ascent = metrics.actualBoundingBoxAscent;
+    const descent = metrics.actualBoundingBoxDescent;
+
+    max.left = Math.max(max.left, left);
+    max.right = Math.max(max.right, right);
+    max.ascent = Math.max(max.ascent, ascent);
+    max.descent = Math.max(max.descent, descent);
+    lastDescent = descent;
+
+    return { line, left, right, ascent, descent };
+  });
+
+  const lineHeight = max.ascent + max.descent + options.lineSpacing;
+
+  const contentWidth = max.left + max.right;
+  const contentHeight =
+    lineHeight * lineProps.length -
+    options.lineSpacing -
+    (max.descent - lastDescent);
+
+  canvas.width =
+    contentWidth +
+    options.borderLeftWidth +
+    options.borderRightWidth +
+    options.paddingLeft +
+    options.paddingRight;
+
+  canvas.height =
+    contentHeight +
+    options.borderTopWidth +
+    options.borderBottomWidth +
+    options.paddingTop +
+    options.paddingBottom;
+
+  const hasBorder =
+    options.borderLeftWidth ||
+    options.borderTopWidth ||
+    options.borderRightWidth ||
+    options.borderBottomWidth || false;
+
+  if (hasBorder) {
+    ctx.fillStyle = options.borderColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  if (options.backgroundColor) {
+    ctx.fillStyle = options.backgroundColor;
+    ctx.fillRect(
+      options.borderLeftWidth,
+      options.borderTopWidth,
+      canvas.width - (options.borderLeftWidth + options.borderRightWidth),
+      canvas.height - (options.borderTopWidth + options.borderBottomWidth)
+    );
+  } else if (hasBorder) {
+    ctx.clearRect(
+      options.borderLeftWidth,
+      options.borderTopWidth,
+      canvas.width - (options.borderLeftWidth + options.borderRightWidth),
+      canvas.height - (options.borderTopWidth + options.borderBottomWidth)
+    );
+  }
+
+  ctx.font = options.font;
+  ctx.fillStyle = options.textColor;
+  ctx.antialias = "gray";
+  ctx.textAlign = options.textAlign;
+  ctx.lineWidth = options.strokeWidth;
+  ctx.strokeStyle = options.strokeColor;
+
+  let offsetY = options.borderTopWidth + options.paddingTop;
+  lineProps.forEach(lineProp => {
+    // Calculate Y
+    let x = 0;
+    const y = max.ascent + offsetY;
+
+    // Calculate X
+    switch (options.textAlign) {
+      case "start":
+      case "left":
+        x = lineProp.left + options.borderLeftWidth + options.paddingLeft;
+        break;
+
+      case "end":
+      case "right":
+        x =
+          canvas.width -
+          lineProp.left -
+          options.borderRightWidth -
+          options.paddingRight;
+        break;
+
+      case "center":
+        x = contentWidth / 2 + options.borderLeftWidth + options.paddingLeft;
+        break;
+    }
+
+    ctx.fillText(lineProp.line, x, y);
+
+    if ( options.strokeWidth > 0 ) {
+      ctx.strokeText(lineProp.line, x, y);
+    }
+
+    offsetY += lineHeight;
+  });
+
+  switch (options.output) {
+    case "buffer":
+      return canvas.toBuffer();
+    case "stream":
+      return canvas.createPNGStream();
+    case "dataURL":
+      return canvas.toDataURL("image/png");
+    case "canvas":
+      return canvas;
+    default:
+      throw new Error(`output type:${options.output} is not supported.`);
+  }
+};
+
+function parseOptions(options) {
+  return {
+    font: or(options.font, "30px sans-serif"),
+    textAlign: or(options.textAlign, "left"),
+    textColor: or(options.textColor, options.color, "black"),
+    backgroundColor: or(options.bgColor, options.backgroundColor, null),
+    lineSpacing: or(options.lineSpacing, 0),
+
+    strokeWidth: or(options.strokeWidth, 0),
+    strokeColor: or(options.strokeColor, "white"),
+
+    paddingLeft: or(options.paddingLeft, options.padding, 0),
+    paddingTop: or(options.paddingTop, options.padding, 0),
+    paddingRight: or(options.paddingRight, options.padding, 0),
+    paddingBottom: or(options.paddingBottom, options.padding, 0),
+
+    borderLeftWidth: or(options.borderLeftWidth, options.borderWidth, 0),
+    borderTopWidth: or(options.borderTopWidth, options.borderWidth, 0),
+    borderBottomWidth: or(options.borderBottomWidth, options.borderWidth, 0),
+    borderRightWidth: or(options.borderRightWidth, options.borderWidth, 0),
+    borderColor: or(options.borderColor, "black"),
+
+    localFontName: or(options.localFontName, null),
+    localFontPath: or(options.localFontPath, null),
+
+    output: or(options.output, "buffer")
+  };
+}
+
+function or() {
+  for (const arg of arguments) {
+    if (arg !== undefined && arg !== null && arg !== false && !(typeof arg === 'number' && (Number.isNaN(arg) || arg === 0))) {
+      return arg;
+    }
+  }
+  return arguments[arguments.length - 1];
+}
+
+module.exports = text2png;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@igxjs/text2png",
+  "version": "3.0.0",
+  "description": "Convert text to png for node.js",
+  "main": "index.js",
+  "bin": {
+    "text2png": "./bin/text2png.js"
+  },
+  "scripts": {
+    "lint": "eslint **/*.js *.js",
+    "fix": "eslint **/*.js *.js --fix",
+    "test": "npm run lint && jasmine"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ibm-garage-experience/text2png.git"
+  },
+  "keywords": [
+    "text",
+    "png"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "tkrkts <tkrkt2773@gmail.com> (http://github.com/tkrkt)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ibm-garage-experience/text2png/issues"
+  },
+  "homepage": "https://github.com/ibm-garage-experience/text2png#readme",
+  "files": [
+    "bin",
+    "README.md",
+    "index.js",
+    "package.json",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "canvas": "^3.2.1",
+    "commander": "^14.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.0",
+    "eslint-config-prettier": "^10.1.8",
+    "jasmine": "^6.0.0",
+    "looks-same": "^10.0.1"
+  }
+}