Multi Layers Image

Multi Layers Image is a javascript library to generate image from some images with transparent (webp, png, svg, ...) or with a configuration with a seed to always generate the image with the same configuration and seed.

Exemple:

• Useful to generate a custom and random avatar.

This lib can be used directly on your front

Compatible Typescript and Javascript but not working for Node

Installation

npm install multi-layers-image
# OR
yarn add multi-layers-image

Usage

There is 2 features:

Superpose

import { superpose } from 'multi-layers-image'

const image = await superpose(
  [
    "https://cdn.pixabay.com/photo/2017/06/20/04/42/cloud-2421760_1280.png",
    "https://cdn.pixabay.com/photo/2020/02/19/07/16/transparent-4861535_1280.png"
  ],
  {
    width: 250,
    height: 250,
    mimetype: 'image/png'
  }
);

GenerateFromConfig

import { generateFromConfig } from 'multi-layers-image'

const image = await generateFromConfig([{
    name: "FirstLayer",
    images: [
      "/Layer01/1.svg",
      "/Layer01/2.svg",
      "/Layer01/3.svg",
    ]
  },{
    linkedToName: "FirstLayer",
    images: [
      "/Layer02/1.svg",
      "/Layer02/2.svg",
      "/Layer02/3.svg",
    ]
  },{
    images: [
      "/Layer03/1.svg",
      "/Layer03/2.svg",
      "/Layer03/3.svg",
    ]
  }],
  {
    width: 250,
    height: 250,
    mimetype: 'image/svg+xml'
  }
);

Image Format

Images can be passed as absolute url, relative url, Blob or as string for Svg

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Command on this repository

• clean delete build folder, to clean artifactory of a previous build
• typecheck check if the compilation is ready without generate anything, to check types, links, ...
• typecheck:watch listen all changes to confirm everytime if the build stay safe
• build will build with webpack everything into build/folder
• build:lib only build the lib
• build:lib:esm only build the esm version of the lib
• build:es only build ECMAScript module
• build:umd only build UMD module
• build:umd:min only build UMD module in minify version
• build:copyfiles copy metadata like package, license, ... to the build folder
• test launcher test with jest
• test:watch listen all changes to exec tests each times
• lint detect lint errors and warnings in every files
• lint:fix format and fix every lint errors and warnings
• prerelease Auto formatting when publishing the library (prettier + tslint + tests)
• release publish the package in NPM
• release:local install locally the package

How to release

Prerequis

• Working test with Jest

Workflow

• Be sure to have all dependencies or npm install
  • You can make use of npm typecheck
• Dev as you want
• Build with npm run build, to generate final artifacts
  • Note: the build process will automatically run type checking.
• npm run prerelease to get everything ready for release, including code formatting with prettier + tslint and test stage.

For testing

• From this project use cd ./build && npm link, to prepare npm to be link to an other one
• From on other project use npm link multi-layers-image, in order to test the package

To Clean

• From this project cd ./build && npm unlink
• From the test project npm unlink --no-save multi-layers-image

Now we have 2 options:

• npm run release:local to install locally our package through a symlink from the build folder to your local npm cache.
• npm run release to finally publish your package in npm.

Thanks

This library was generated thanks to https://github.com/fjcalzado/library-ts-boilerplate