@ohos-ports/oslllo-svg2 5.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 oslllo
+
+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,62 @@
+![Cover Image](docs/images/cover.png)
+
+[![CI/Test](https://github.com/oslllo/svg2/actions/workflows/ci.test.yml/badge.svg)](https://github.com/oslllo/svg2/actions/workflows/ci.test.yml)
+[![npm](https://img.shields.io/npm/v/oslllo-svg2)](https://www.npmjs.com/package/oslllo-svg2)
+[![Coverage Status](https://img.shields.io/coveralls/github/oslllo/svg2)](https://coveralls.io/github/oslllo/svg2?branch=master)
+
+## 🎉 v1.0.0 Removed `Canvas & JSDOM` no more slow `npm install` cycles.
+
+## Documentation, Installation, and Usage Instructions
+
+See the full installation and usage documentation [HERE](https://docs.oslllo.com/svg2/master/).
+
+## The Objective
+
+I wanted to convert `SVGs` into diffrent image formats.
+
+## The Problem / Why
+
+Converting a `SVG` into an image turns out to not be a simple and straight forward as it may seem. Multiple packages already exist on `NPM` but they all come with a few caveats (that i don't like).
+
+- Some use `puppeteer` which requires you to download a browser like chromium **(130mb download)**
+- Some do not support `Node` **(work in browsers only)**
+- Some support `CLI` only.
+- Some only convert to `png`
+
+---
+
+### Usage Examples
+
+#### Convert a SVG2 `png` and save to path (promise)
+
+```js
+const Svg2 = require("oslllo-svg2");
+
+Svg2("path/to/svg/example.svg")
+  .png()
+  .toFile("path/to/save/example.png")
+  .then(() => {
+    console.log("done");
+  })
+  .catch((error) => {
+    throw error;
+  });
+```
+
+#### Convert a SVG2 `png` and save to path (callback)
+
+```js
+const Svg2 = require("oslllo-svg2");
+
+Svg2("path/to/svg/example.svg")
+  .png()
+  .toFile("path/to/save/example.png", (err) => {
+    if (err) {
+      throw err;
+    } else {
+      console.log("done");
+    }
+  });
+```
+
+---

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@ohos-ports/oslllo-svg2",
+  "version": "5.0.0-beta.0",
+  "description": "Convert a SVG to multiple image formats (without puppeteer or a headless browser)",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/oslllo-svg2/5.0.0"
+  },
+  "keywords": [
+    "svg2",
+    "oslllo",
+    "convert",
+    "svg-png",
+    "svg-bmp",
+    "svg-jpeg",
+    "svg-tiff",
+    "svg-image",
+    "svg-image",
+    "svg-to-png",
+    "svg-to-bmp",
+    "svg-to-jpeg",
+    "svg-to-tiff",
+    "svg-to-image",
+    "svg-to-element"
+  ],
+  "author": "Ghustavh Ehm <https://github.com/Ghustavh97>",
+  "contributors": [
+    {
+      "name": "Ghustavh Ehm",
+      "email": "Ghustavh97@gmail.com",
+      "url": "https://github.com/Ghustavh97"
+    },
+    {
+      "name": "oslllo",
+      "email": "oslllo.com@gmail.com",
+      "url": "https://github.com/oslllo"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ohos-ports/ohos-ports/issues"
+  },
+  "homepage": "https://docs.oslllo.com/svg2/master",
+  "dependencies": {
+    "@ohos-ports/resvg-resvg-js": "2.6.2-beta.1",
+    "domino": "^2.1.6",
+    "jimp": "^0.22.12",
+    "oslllo-validator": "^4.0.0"
+  },
+  "devDependencies": {
+    "chai": "^4.3.6",
+    "chai-as-promised": "^7.1.1",
+    "coveralls": "^3.1.1",
+    "fs-extra": "^10.1.0",
+    "looks-same": "^7.3.0",
+    "mocha": "^11.7.5",
+    "mocha-lcov-reporter": "^1.3.0",
+    "nyc": "^15.1.0"
+  },
+  "files": [
+    "src/",
+    "LICENSE",
+    "README.md",
+    "package.json"
+  ]
+}

package/src/color.js

@@ -0,0 +1,37 @@
+"use strict";
+
+const error = require("./error");
+const is = require("oslllo-validator");
+
+function background(options) {
+    if (is.object(options)) {
+        this.options.update("background", options);
+    } else if (is.hexColor(options)) {
+        this.options.update("background", { color: options });
+    } else {
+        throw error.invalidParameterError(
+            "options",
+            "object or hex color string",
+            options
+        );
+    }
+    options = this.options.get("background");
+    if (
+        !is.hexColor(options.color) ||
+        (is.number(Number(options.color)) && !is.actualNaN(Number(options.color)))
+    ) {
+        throw error.invalidParameterError(
+            "background.color",
+            "hex color string",
+            options
+        );
+    }
+    this.output.background = options;
+    return this;
+}
+
+module.exports = function (Svg2) {
+    Object.assign(Svg2.prototype, {
+        background: background,
+    });
+};

package/src/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+const jimp = require("jimp");
+
+module.exports = {
+	AUTO: "auto",
+	FORMATS: {
+		bmp: jimp.MIME_BMP,
+		png: jimp.MIME_PNG,
+		tiff: jimp.MIME_TIFF,
+		jpeg: jimp.MIME_JPEG,
+	},
+};

package/src/constructor.js

@@ -0,0 +1,70 @@
+"use strict";
+
+const fs = require("fs");
+const jimp = require("jimp");
+const Svg = require("./svg");
+const error = require("./error");
+const Option = require("./option");
+const is = require("oslllo-validator");
+const Processor = require("./processor");
+const { AUTO, FORMATS } = require("./constants");
+
+const Svg2 = function (input) {
+	if (!(this instanceof Svg2)) {
+		return new Svg2(input);
+	}
+	input = this.check(input);
+	this.options = new Option();
+	this.input = {
+		string: input,
+		element: null,
+	};
+	this.output = {
+		file: undefined,
+		format: undefined,
+        resize: undefined,
+        extend: undefined,
+        background: undefined
+	};
+	this.jimp = jimp;
+	this.svg = new Svg(this);
+	this.processor = new Processor(this);
+	return this;
+};
+
+Svg2.prototype = {
+	check: function (input) {
+		if (arguments.length === 1 && !is.defined(input)) {
+			throw error.invalidParameterError(
+				"input",
+				"SVG string or SVG string in a buffer",
+				input
+			);
+		}
+		if (!is.buffer(input) && !is.string(input)) {
+			throw error.invalidParameterError(
+				"input",
+				"SVG string or SVG string in a buffer",
+				input
+			);
+		}
+		if (is.buffer(input)) {
+			input = Buffer.from(input).toString();
+		}
+		if (is.pathToFile(input)) {
+			input = fs.readFileSync(input, "utf-8");
+		}
+		if (!is.svg(input)) {
+			throw error.invalidParameterError("input", "valid SVG", `invalid SVG: ${input}`);
+		}
+		return input;
+	},
+};
+
+Svg2.AUTO = AUTO;
+Svg2.BMP = FORMATS.bmp
+Svg2.PNG = FORMATS.png
+Svg2.TIFF = FORMATS.tiff
+Svg2.JPEG = FORMATS.jpeg
+
+module.exports = Svg2;

package/src/error.js

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * Create an Error with a message relating to an invalid parameter.
+ *
+ * @param {string} name - parameter name.
+ * @param {string} expected - description of the type/value/range expected.
+ * @param {*} actual - the value received.
+ * @returns {Error} Containing the formatted message.
+ * @private
+ */
+ const invalidParameterError = function (name, expected, actual) {
+	return new TypeError(
+		`Expected <${expected}> for [${name}] but received ${actual} of type <${typeof actual}>`
+	);
+};
+
+module.exports = {
+	invalidParameterError: invalidParameterError,
+};

package/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+const Svg2 = require("./constructor");
+require("./color")(Svg2);
+require("./resize")(Svg2);
+require("./output")(Svg2);
+
+module.exports = Svg2;

package/src/option.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const error = require("./error");
+const is = require("oslllo-validator");
+const constants = require("./constants");
+
+const Option = function () {
+    this.data = {
+        main: { resolveWithObject: false },
+        png: { transparent: false },
+        uri: { base64: false, mime: constants.FORMATS.png },
+        extend: { top: 0, right: 0, bottom: 0, left: 0, background: "#ffffff" },
+        background: { color: "#ffffff" }
+    };
+};
+
+Option.prototype = {
+    get: function (setting) {
+        if (!is.defined(setting) || typeof setting !== "string") {
+            throw error.invalidParameterError("setting", "string", setting);
+        }
+        var expected = Object.keys(this.data);
+        if (!expected.includes(setting)) {
+            throw error.invalidParameterError("setting", expected.toString(), setting);
+        }
+        return this.data[setting];
+    },
+    update: function (setting, options) {
+        if (options == undefined || !is.object(options)) {
+            throw error.invalidParameterError("options", "object", options);
+        }
+        if (Object.keys(options).length === 0) {
+            return;
+        }
+        var preset = this.get(setting);
+        for (var option in options) {
+            if (is.defined(preset[option])) {
+                this.data[setting][option] = options[option];
+            } else {
+                var expected = Object.keys(preset);
+                throw error.invalidParameterError(
+                    "png",
+                    `[${expected.toString()}]`,
+                    option
+                );
+            }
+        }
+    },
+};
+
+module.exports = Option;

package/src/output.js

@@ -0,0 +1,135 @@
+"use strict";
+
+const fs = require("fs");
+const jimp = require("jimp");
+const error = require("./error");
+const domino = require("domino");
+const is = require("oslllo-validator");
+const constants = require("./constants");
+
+const formats = constants.FORMATS;
+
+function png(options = {}) {
+  this.options.update("png", options);
+  options = this.options.get("png");
+  this.output.format = formats.png;
+  return this;
+}
+
+function jpeg() {
+  this.output.format = formats.jpeg;
+  return this;
+}
+
+function tiff() {
+  this.output.format = formats.tiff;
+  return this;
+}
+
+function bmp() {
+  this.output.format = formats.bmp;
+  return this;
+}
+
+function _getDocument(input) {
+  const document = domino.createDocument(input, true);
+  return document;
+}
+
+function toElement(input) {
+  input = input ? input : this.svg.html();
+  input = this.check(input);
+  return _getDocument(input).getElementsByTagName("svg")[0];
+}
+
+function toUri(options = {}, callback) {
+  if (arguments.length === 1 && is.fn(options)) {
+    callback = options;
+  } else {
+    this.options.update("uri", options);
+  }
+  options = this.options.get("uri");
+  var mime = options.mime;
+  var base64 = options.base64;
+  var svg = this.svg.html();
+  var png = this.svg.png(svg);
+
+  async function generateDataUri() {
+    const buffer = await png;
+    var image = await jimp.read(buffer);
+    var uri = await image.getBase64Async(mime);
+    if (base64) {
+      uri = uri.replace(new RegExp(`^data:${mime};base64,`), "");
+    }
+    return uri;
+  }
+  if (is.defined(callback)) {
+    if (!is.fn(callback)) {
+      throw error.invalidParameterError("callback", "function", callback);
+    }
+
+    generateDataUri()
+      .then((uri) => {
+        callback(null, uri);
+      })
+      .catch((error) => {
+        callback(error);
+      });
+  } else {
+    return generateDataUri();
+  }
+}
+
+function toBuffer(callback) {
+  if (is.defined(callback) && !is.fn(callback) && callback !== undefined) {
+    throw error.invalidParameterError("callback", "function", callback);
+  }
+  return this.processor.pipeline(callback);
+}
+
+function toFile(destination, callback) {
+  if (!destination || destination.length === 0 || typeof destination !== "string") {
+    const err = error.invalidParameterError("destination", "string", destination);
+    if (is.fn(callback)) {
+      callback(err);
+    } else {
+      return Promise.reject(err);
+    }
+  } else {
+    if (callback || is.defined(callback)) {
+      if (is.fn(callback)) {
+        this.processor.pipeline((err, buffer) => {
+          fs.writeFile(destination, buffer, callback);
+        });
+      } else {
+        throw error.invalidParameterError("callback", "function", callback);
+      }
+    } else {
+      return new Promise((resolve, reject) => {
+        var error;
+        this.processor.pipeline((err, buffer) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+          fs.writeFile(destination, buffer, (err) => {
+            err ? reject(err) : resolve();
+          });
+        });
+      });
+    }
+  }
+}
+
+module.exports = function (Svg2) {
+  Object.assign(Svg2.prototype, {
+    png: png,
+    bmp: bmp,
+    jpeg: jpeg,
+    tiff: tiff,
+    toUri: toUri,
+    toFile: toFile,
+    toBuffer: toBuffer,
+    toElement: toElement,
+  });
+};

package/src/processor.js

@@ -0,0 +1,106 @@
+"use strict";
+
+const jimp = require("jimp");
+const is = require("oslllo-validator");
+const constants = require("./constants");
+
+const formats = constants.FORMATS;
+
+function Processor(instance) {
+  this.instance = instance;
+}
+
+Processor.prototype = {
+  pipeline: function (callback) {
+    var format = this.instance.output.format;
+    if (!format || !is.defined(format)) {
+      const err = new Error(`Output format was not set.`);
+      callback(err);
+      return;
+    }
+    var i = this.instance;
+    if (is.fn(callback)) {
+      this.process((err, buffer) => {
+        i.output.file = buffer;
+        callback(err, buffer);
+      });
+    } else {
+      return new Promise((resolve, reject) => {
+        this.process((err, buffer) => {
+          i.output.file = buffer;
+          err ? reject(err) : resolve(buffer);
+        });
+      });
+    }
+  },
+  process: function (callback) {
+    var i = this.instance;
+    i.svg
+      .png(i.svg.html())
+      .then(async (png) => {
+        png = await jimp.read(png);
+        /**
+         * @ignore
+         * @description - Because only pngs can be transparent
+         * */
+        if (!i.options.get("png").transparent || i.output.format !== formats.png) {
+          var dimensions = i.svg.dimensions();
+          png = await this.background(png, dimensions);
+        }
+        for (var format in formats) {
+          if (formats[format] === i.output.format) {
+            png.getBuffer(formats[format], callback);
+            break;
+          }
+        }
+      })
+      .catch((error) => {
+        callback(error);
+      });
+  },
+  blank: function (width = jimp.AUTO, height = jimp.AUTO, background) {
+    if (!background) {
+      background = this.instance.options.get("background").color;
+    }
+    return new jimp(width, height, background);
+  },
+  background: async function (image, dimensions) {
+    var { width, height } = dimensions;
+
+    var x, y;
+    x = y = 0;
+
+    /**
+     * @ignore
+     * @description - Set initial background
+     */
+    var background = await this.blank(width, height);
+    image = background.composite(image, x, y);
+
+    if (this.instance.output.extend) {
+      var options = this.instance.options.get("extend");
+
+      var extended = {
+        background: options.background,
+        height: options.top + options.bottom + height,
+        width: options.left + options.right + width,
+      };
+
+      if (options.left) {
+        x = x + options.left;
+      }
+
+      if (options.top) {
+        y = y + options.top;
+      }
+
+      extended.image = await this.blank(extended.width, extended.height, extended.background);
+
+      image = extended.image.composite(image, x, y);
+    }
+
+    return image;
+  },
+};
+
+module.exports = Processor;

package/src/resize.js

@@ -0,0 +1,27 @@
+"use strict";
+
+const error = require("./error");
+const is = require("oslllo-validator");
+
+function extend(options) {
+    if (is.object(options)) {
+        this.options.update("extend", options);
+    } else if (is.number(options)) {
+        var sides = new Object();
+        ["top", "right", "bottom", "left"].forEach((side) => {
+            sides[side] = options;
+        });
+        this.options.update("extend", sides);
+    } else {
+        throw error.invalidParameterError("options", "object or number", options);
+    }
+    options = this.options.get("extend");
+    this.output.extend = options;
+    return this;
+}
+
+module.exports = function (Svg2) {
+    Object.assign(Svg2.prototype, {
+        extend: extend,
+    });
+};

package/src/svg.js

@@ -0,0 +1,204 @@
+"use strict";
+
+const Svg2 = require("..");
+const error = require("./error");
+const is = require("oslllo-validator");
+const constants = require("./constants");
+const { renderAsync } = require("@ohos-ports/resvg-resvg-js");
+const Svg = function (instance) {
+  this.instance = instance;
+  this.update(instance.toElement(instance.input.string), true);
+};
+
+Svg.prototype = {
+  update: function (svg, isElement = false) {
+    if (isElement) {
+      if (svg.constructor.name !== "SVGSVGElement") {
+        throw error.invalidParameterError("svg", "SVGSVGElement", svg);
+      }
+    } else {
+      svg = this.instance.check(svg);
+      svg = this.instance.toElement(svg);
+    }
+    this.instance.input.element = svg;
+    this.instance.input.string = svg.outerHTML;
+    return this.instance;
+  },
+  resize: function (input) {
+    if (!is.defined(input) || (input.constructor.name !== "Object" && !is.number(input))) {
+      throw error.invalidParameterError("input", "object or number", input);
+    }
+    var svg = this.element();
+    var current = this.dimensions();
+    var output = {
+      scale: 0,
+      width: undefined,
+      height: undefined,
+    };
+    function set(dimension) {
+      var opposite = dimension == "height" ? "width" : "height";
+      output[dimension] = input[dimension];
+      if (input[opposite] === constants.AUTO) {
+        output[opposite] = output[opposite] = (input[dimension] / current[dimension]) * current[opposite];
+      } else {
+        output[opposite] = current[opposite];
+      }
+      return output;
+    }
+    if (is.number(input)) {
+      output.width = current.width * input;
+      output.height = current.height * input;
+      output.scale = input;
+    } else {
+      if (
+        is.defined(input.width) &&
+        input.width !== constants.AUTO &&
+        is.defined(input.height) &&
+        input.height !== constants.AUTO
+      ) {
+        output.width = input.width;
+        output.height = input.height;
+      } else if (is.defined(input.width) && input.width !== constants.AUTO) {
+        output = set("width");
+      } else if (is.defined(input.height) && input.height !== constants.AUTO) {
+        output = set("height");
+      } else {
+        throw error.invalidParameterError("input", "width or height in object", input);
+      }
+      output.scale = (output.width / current.width + output.height / current.height) / 2;
+    }
+    svg.setAttribute("width", output.width);
+    svg.setAttribute("height", output.height);
+    this.update(svg, true);
+    this.instance.output.resize = output;
+    return this.instance;
+  },
+  html: function () {
+    return this.instance.input.string;
+  },
+  png: async function (svg) {
+    const opts = {
+      font: {
+        loadSystemFonts: true, // It will be faster to disable loading system fonts.
+      },
+    };
+    const resvg = await renderAsync(svg, opts);
+    const pngBuffer = resvg.asPng();
+
+    return pngBuffer;
+  },
+  element: function () {
+    return this.instance.input.element;
+  },
+  dimensionToPx: function (input) {
+    if (!input || (typeof input != "string" && typeof input != "number")) {
+      throw error.invalidParameterError("input", "string with dimension or number", input);
+    }
+
+    function round(input) {
+      return Math.round((input + Number.EPSILON) * 100) / 100;
+    }
+
+    var units = ["rem", "px", "em", "ex", "ch", "cm", "mm", "q", "in", "pc", "pt"];
+    var convert = false;
+    for (var i = 0; i < units.length; i++) {
+      var unit = units[i];
+      convert = typeof input == "string" && input.search(unit) !== -1;
+      if (convert) {
+        input = input.replace(unit, "");
+        const cm = 96 / 2.54;
+        const inch = 2.54 * cm;
+        switch (unit.toLowerCase()) {
+          case "px":
+            break;
+          case "em":
+          case "rem":
+            input = input * 16; // we can get away with this because we use jsdom.
+            break;
+          case "ex":
+            input = round(input * 7.156);
+            break;
+          case "ch":
+            input = input * 8;
+            break;
+          case "cm":
+            input = input * cm;
+            break;
+          case "mm":
+            input = round(input * ((1 / 10) * cm));
+            break;
+          case "q":
+            input = input * ((1 / 40) * cm);
+            break;
+          case "in":
+            input = input * inch;
+            break;
+          case "pc":
+            input = input * ((1 / 6) * inch);
+            break;
+          case "pt":
+            input = input * ((1 / 72) * inch);
+            break;
+        }
+      }
+    }
+    var dimension = Number(input);
+    if (isNaN(dimension)) {
+      throw error.invalidParameterError("input", "a valid dimension i.e 20px, 20rem, 20em or 20", input);
+    }
+    return dimension;
+  },
+  viewBox: function (svg) {
+    if (!svg.hasAttribute("viewBox")) {
+      throw error.invalidParameterError(
+        "SVG dimension",
+        "height/width and viewBox attributes to be set",
+        this.instance.svg.html()
+      );
+    }
+    var viewBox = svg.getAttribute("viewBox").split(" ");
+    return {
+      "min-x": Number(viewBox[0]),
+      "min-y": Number(viewBox[1]),
+      width: Number(viewBox[2]),
+      height: Number(viewBox[3]),
+    };
+  },
+  dimensions: function () {
+    var svg = this.element();
+    var dimension = {
+      names: ["width", "height"],
+      data: { width: 0, height: 0 },
+    };
+    var dn = dimension.names;
+    var dd = dimension.data;
+    if (svg.hasAttribute(dn[0]) && svg.hasAttribute(dn[1])) {
+      var width = svg.getAttribute(dn[0]);
+      var height = svg.getAttribute(dn[1]);
+      if (!width.includes("%") && !width.includes("vw") && !height.includes("%") && !height.includes("vh")) {
+        for (var i = 0; i < dn.length; i++) {
+          var name = dn[i];
+          switch (name) {
+            case "width":
+              dd.width = this.dimensionToPx(width);
+              break;
+            case "height":
+              dd.height = this.dimensionToPx(height);
+              break;
+          }
+        }
+      } else {
+        var viewbox = this.viewBox(svg);
+        dd.width = viewbox.width;
+        dd.height = viewbox.height;
+      }
+    } else {
+      var viewbox = this.viewBox(svg);
+      dd.width = viewbox.width;
+      dd.height = viewbox.height;
+    }
+    return dd;
+  },
+};
+
+module.exports = Svg;