Image-merger-by-steps NPM

image-merger-by-steps

Merging a series of images all at one time on low-end devices can be painful. Here is the solution. A TypeScript module to load and merge images on the canvas with control over the merging steps.

Features

Customizable Steps: Define the steps and configurations for merging.
Supports Various Formats: Merge images in different formats such as JPEG and PNG
Supports For Image Customization: Setting the position, size, and opacity for each layer image.

Options

Merger Options:

Key	Type	Description
slices	number[]	An array of numbers defining the slices. For example, 2, 1 will process the first two images together in one step, and then the next image in a separate step. If there were more images, they would be processed together.
canvasSizes	{width: number, height: number}	Object defining the canvas size
format	string	Output format of the merged image (options: 'jpg', 'jpeg', 'png')

Layer Options

Key	Type	Description
x	number	set the horizontal position of the image on the canvas
y	number	set the vertical position of the image on the canvas
size	number	set the scale of the image
opacity	number	Number to set the opacity of the image (0 to 1)

Installation

You can install the package via npm:

npm install image-merger-by-steps

Usage

Here is an example of how to use image-merger-by-steps(checkout /example folder):

import ImageMerger from "image-merger-by-steps";

// Make sure the code below is running in a browser environment,
// because the ImageMerger class uses the HTMLCanvasElement
const imageMerger = new ImageMerger();

const layers1 = [
  { src: "image1.png", x: 0, y: 0, size: 1, opacity: 1 }, // Here goes the LayerOptions
  { src: "image2.png", x: 0, y: 1000, size: 1, opacity: 1 },
  { src: "image3.png", x: 0, y: 0, size: 1, opacity: 1 },
];
const layers2 = [
  { src: "image4.png", x: 0, y: 0, size: 1, opacity: 1 },
  { src: "image5.png", x: 0, y: 1000, size: 1, opacity: 1 },
  { src: "image6.png", x: 0, y: 0, size: 1, opacity: 1 },
];
const images = [layers1, layers2, layers1, layers2, layers1]; // Array of layers for each image

imageMerger
  .merge(images, {
    format: "png", // Here goes the MergerOptions
    slices: [2, 2, 1],
  })
  .then((base64Images) => {
    // Put base64 into img -src- attribute
    base64Images.forEach((base64) => {
      const img = document.createElement("img");
      img.src = base64;
      const exampleElement = document.getElementById("example");
      if (exampleElement) exampleElement.appendChild(img);
    });
  });

import ImageMerger, { Layer } from "image-merger-by-steps";

// Make sure the code below is running in a browser environment,
// because the ImageMerger class uses the HTMLCanvasElement
const imageMerger = new ImageMerger();
const layers1: Layer[] = [
  { src: "image1.png", x: 0, y: 0, size: 1, opacity: 1 }, // Here goes the LayerOptions
  { src: "image2.png", x: 0, y: 1000, size: 1, opacity: 1 },
  { src: "image3.png", x: 0, y: 0, size: 1, opacity: 1 },
];
const layers2: Layer[] = [
  { src: "image4.png", x: 0, y: 0, size: 1, opacity: 1 },
  { src: "image5.png", x: 0, y: 1000, size: 1, opacity: 1 },
  { src: "image6.png", x: 0, y: 0, size: 1, opacity: 1 },
];
const images: Layer[][] = [layers1, layers2, layers1, layers2, layers1]; // Array of layers for each image

imageMerger
  .merge(images, {
    format: "png", // Here goes the MergerOptions
    slices: [2, 2, 1],
  })
  .then((base64Images) => {
    // Put base64 into img -src- attribute
    base64Images.forEach((base64) => {
      const img = document.createElement("img");
      img.src = base64;
      const exampleElement = document.getElementById("example");
      if (exampleElement) exampleElement.appendChild(img);
    });
  });