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):

1import ImageMerger from "image-merger-by-steps";
2
3// Make sure the code below is running in a browser environment,
4// because the ImageMerger class uses the HTMLCanvasElement
5const imageMerger = new ImageMerger();
6
7const layers1 = [
8  { src: "image1.png", x: 0, y: 0, size: 1, opacity: 1 }, // Here goes the LayerOptions
9  { src: "image2.png", x: 0, y: 1000, size: 1, opacity: 1 },
10  { src: "image3.png", x: 0, y: 0, size: 1, opacity: 1 },
11];
12const layers2 = [
13  { src: "image4.png", x: 0, y: 0, size: 1, opacity: 1 },
14  { src: "image5.png", x: 0, y: 1000, size: 1, opacity: 1 },
15  { src: "image6.png", x: 0, y: 0, size: 1, opacity: 1 },
16];
17const images = [layers1, layers2, layers1, layers2, layers1]; // Array of layers for each image
18
19imageMerger
20  .merge(images, {
21    format: "png", // Here goes the MergerOptions
22    slices: [2, 2, 1],
23  })
24  .then((base64Images) => {
25    // Put base64 into img -src- attribute
26    base64Images.forEach((base64) => {
27      const img = document.createElement("img");
28      img.src = base64;
29      const exampleElement = document.getElementById("example");
30      if (exampleElement) exampleElement.appendChild(img);
31    });
32  });

1import ImageMerger, { Layer } from "image-merger-by-steps";
2
3// Make sure the code below is running in a browser environment,
4// because the ImageMerger class uses the HTMLCanvasElement
5const imageMerger = new ImageMerger();
6const layers1: Layer[] = [
7  { src: "image1.png", x: 0, y: 0, size: 1, opacity: 1 }, // Here goes the LayerOptions
8  { src: "image2.png", x: 0, y: 1000, size: 1, opacity: 1 },
9  { src: "image3.png", x: 0, y: 0, size: 1, opacity: 1 },
10];
11const layers2: Layer[] = [
12  { src: "image4.png", x: 0, y: 0, size: 1, opacity: 1 },
13  { src: "image5.png", x: 0, y: 1000, size: 1, opacity: 1 },
14  { src: "image6.png", x: 0, y: 0, size: 1, opacity: 1 },
15];
16const images: Layer[][] = [layers1, layers2, layers1, layers2, layers1]; // Array of layers for each image
17
18imageMerger
19  .merge(images, {
20    format: "png", // Here goes the MergerOptions
21    slices: [2, 2, 1],
22  })
23  .then((base64Images) => {
24    // Put base64 into img -src- attribute
25    base64Images.forEach((base64) => {
26      const img = document.createElement("img");
27      img.src = base64;
28      const exampleElement = document.getElementById("example");
29      if (exampleElement) exampleElement.appendChild(img);
30    });
31  });

Contact

For any questions or feedback, please open an issue on GitHub or contact my email