@midscene/shared 0.5.2-beta-20241010035503.0 → 0.5.2

package/dist/es/img.js

@@ -36,6 +36,9 @@ function base64Encoded(image, withHeader = true) {
   }
   throw new Error("unsupported image type");
 }
+function base64ToPngFormat(base64) {
+  return `data:image/png;base64,${base64}`;
+}
 
 // src/img/transform.ts
 import { Buffer as Buffer2 } from "buffer";
@@ -115,21 +118,34 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
   const createPngOverlay = async (elements2, imageWidth2, imageHeight2) => {
     const image = new Jimp3(imageWidth2, imageHeight2, 0);
     const colors = [
-      { rect: 65535, text: 4294967295 },
-      // blue, white
-      { rect: 2336560127, text: 4294967295 }
-      // brown, white
+      { rect: 4278190335, text: 4294967295 }
+      // red, white
+      // { rect: 0x0000ffff, text: 0xffffffff }, // blue, white
+      // { rect: 0x8b4513ff, text: 0xffffffff }, // brown, white
     ];
+    const boxPadding = 5;
     for (let index = 0; index < elements2.length; index++) {
       const element = elements2[index];
       const color = colors[index % colors.length];
+      const paddedRect = {
+        left: Math.max(0, element.rect.left - boxPadding),
+        top: Math.max(0, element.rect.top - boxPadding),
+        width: Math.min(
+          imageWidth2 - element.rect.left,
+          element.rect.width + boxPadding * 2
+        ),
+        height: Math.min(
+          imageHeight2 - element.rect.top,
+          element.rect.height + boxPadding * 2
+        )
+      };
       image.scan(
-        element.x,
-        element.y,
-        element.width,
-        element.height,
+        paddedRect.left,
+        paddedRect.top,
+        paddedRect.width,
+        paddedRect.height,
         function(x, y, idx) {
-          if (x === element.x || x === element.x + element.width - 1 || y === element.y || y === element.y + element.height - 1) {
+          if (x === paddedRect.left || x === paddedRect.left + paddedRect.width - 1 || y === paddedRect.top || y === paddedRect.top + paddedRect.height - 1) {
             this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
             this.bitmap.data[idx + 1] = color.rect >> 16 & 255;
             this.bitmap.data[idx + 2] = color.rect >> 8 & 255;
@@ -137,15 +153,15 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
           }
         }
       );
-      const textWidth = element.label.length * 8;
+      const textWidth = element.indexId.toString().length * 8;
       const textHeight = 12;
       const rectWidth = textWidth + 5;
       const rectHeight = textHeight + 4;
-      let rectX = element.x - rectWidth;
-      let rectY = element.y + element.height / 2 - textHeight / 2 - 2;
+      let rectX = paddedRect.left - rectWidth;
+      let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
       if (rectX < 0) {
-        rectX = element.x;
-        rectY = element.y - rectHeight;
+        rectX = paddedRect.left;
+        rectY = paddedRect.top - rectHeight;
       }
       image.scan(rectX, rectY, rectWidth, rectHeight, function(x, y, idx) {
         this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
@@ -159,7 +175,7 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
         rectX,
         rectY,
         {
-          text: element.label,
+          text: element.indexId.toString(),
           alignmentX: Jimp3.HORIZONTAL_ALIGN_CENTER,
           alignmentY: Jimp3.VERTICAL_ALIGN_MIDDLE
         },
@@ -171,63 +187,60 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
   };
   return createPngOverlay(elements, imageWidth, imageHeight);
 };
-var processImageElementInfo = async (options) => {
-  const base64Image = options.inputImgBase64.split(";base64,").pop();
-  assert2(base64Image, "base64Image is undefined");
-  const imageBuffer = Buffer3.from(base64Image, "base64");
+var compositeElementInfoImg = async (options) => {
+  const { inputImgBase64, elementsPositionInfo } = options;
+  const imageBuffer = Buffer3.from(inputImgBase64, "base64");
   const image = await Jimp3.read(imageBuffer);
   const { width, height } = image.bitmap;
-  if (width && height) {
-    const svgOverlay = await createSvgOverlay(
-      options.elementsPositionInfo,
-      width,
-      height
-    );
-    const svgOverlayWithoutText = await createSvgOverlay(
-      options.elementsPositionInfoWithoutText,
-      width,
-      height
-    );
-    const compositeElementInfoImgBase64 = await Jimp3.read(imageBuffer).then(async (image2) => {
-      const svgImage = await Jimp3.read(svgOverlay);
-      return image2.composite(svgImage, 0, 0, {
-        mode: Jimp3.BLEND_SOURCE_OVER,
-        opacitySource: 1,
-        opacityDest: 1
-      });
-    }).then((compositeImage) => {
-      return compositeImage.getBufferAsync(Jimp3.MIME_PNG);
-    }).then((buffer) => {
-      return buffer.toString("base64");
-    }).catch((error) => {
-      throw error;
-    });
-    const compositeElementInfoImgWithoutTextBase64 = await Jimp3.read(
-      imageBuffer
-    ).then(async (image2) => {
-      const svgImage = await Jimp3.read(svgOverlayWithoutText);
-      return image2.composite(svgImage, 0, 0, {
-        mode: Jimp3.BLEND_SOURCE_OVER,
-        opacitySource: 1,
-        opacityDest: 1
-      });
-    }).then((compositeImage) => {
-      return compositeImage.getBufferAsync(Jimp3.MIME_PNG);
-    }).then((buffer) => {
-      return buffer.toString("base64");
-    }).catch((error) => {
-      throw error;
-    });
-    return {
-      compositeElementInfoImgBase64,
-      compositeElementInfoImgWithoutTextBase64
-    };
+  if (!width || !height) {
+    throw Error("Image processing failed because width or height is undefined");
   }
-  throw Error("Image processing failed because width or height is undefined");
+  const svgOverlay = await createSvgOverlay(
+    elementsPositionInfo,
+    width,
+    height
+  );
+  return await Jimp3.read(imageBuffer).then(async (image2) => {
+    const svgImage = await Jimp3.read(svgOverlay);
+    return image2.composite(svgImage, 0, 0, {
+      mode: Jimp3.BLEND_SOURCE_OVER,
+      opacitySource: 1,
+      opacityDest: 1
+    });
+  }).then((compositeImage) => {
+    return compositeImage.getBufferAsync(Jimp3.MIME_PNG);
+  }).then((buffer) => {
+    return buffer.toString("base64");
+  }).catch((error) => {
+    throw error;
+  });
+};
+var processImageElementInfo = async (options) => {
+  const base64Image = options.inputImgBase64.split(";base64,").pop();
+  assert2(base64Image, "base64Image is undefined");
+  const [
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64
+  ] = await Promise.all([
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfo
+    }),
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfoWithoutText
+    })
+  ]);
+  return {
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64
+  };
 };
 export {
   base64Encoded,
+  base64ToPngFormat,
   calculateNewDimensions,
+  compositeElementInfoImg,
   imageInfo,
   imageInfoOfBase64,
   processImageElementInfo,

package/dist/lib/img.js

@@ -31,7 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var img_exports = {};
 __export(img_exports, {
   base64Encoded: () => base64Encoded,
+  base64ToPngFormat: () => base64ToPngFormat,
   calculateNewDimensions: () => calculateNewDimensions,
+  compositeElementInfoImg: () => compositeElementInfoImg,
   imageInfo: () => imageInfo,
   imageInfoOfBase64: () => imageInfoOfBase64,
   processImageElementInfo: () => processImageElementInfo,
@@ -80,6 +82,9 @@ function base64Encoded(image, withHeader = true) {
   }
   throw new Error("unsupported image type");
 }
+function base64ToPngFormat(base64) {
+  return `data:image/png;base64,${base64}`;
+}
 
 // src/img/transform.ts
 var import_node_buffer2 = require("buffer");
@@ -159,21 +164,34 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
   const createPngOverlay = async (elements2, imageWidth2, imageHeight2) => {
     const image = new import_jimp3.default(imageWidth2, imageHeight2, 0);
     const colors = [
-      { rect: 65535, text: 4294967295 },
-      // blue, white
-      { rect: 2336560127, text: 4294967295 }
-      // brown, white
+      { rect: 4278190335, text: 4294967295 }
+      // red, white
+      // { rect: 0x0000ffff, text: 0xffffffff }, // blue, white
+      // { rect: 0x8b4513ff, text: 0xffffffff }, // brown, white
     ];
+    const boxPadding = 5;
     for (let index = 0; index < elements2.length; index++) {
       const element = elements2[index];
       const color = colors[index % colors.length];
+      const paddedRect = {
+        left: Math.max(0, element.rect.left - boxPadding),
+        top: Math.max(0, element.rect.top - boxPadding),
+        width: Math.min(
+          imageWidth2 - element.rect.left,
+          element.rect.width + boxPadding * 2
+        ),
+        height: Math.min(
+          imageHeight2 - element.rect.top,
+          element.rect.height + boxPadding * 2
+        )
+      };
       image.scan(
-        element.x,
-        element.y,
-        element.width,
-        element.height,
+        paddedRect.left,
+        paddedRect.top,
+        paddedRect.width,
+        paddedRect.height,
         function(x, y, idx) {
-          if (x === element.x || x === element.x + element.width - 1 || y === element.y || y === element.y + element.height - 1) {
+          if (x === paddedRect.left || x === paddedRect.left + paddedRect.width - 1 || y === paddedRect.top || y === paddedRect.top + paddedRect.height - 1) {
             this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
             this.bitmap.data[idx + 1] = color.rect >> 16 & 255;
             this.bitmap.data[idx + 2] = color.rect >> 8 & 255;
@@ -181,15 +199,15 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
           }
         }
       );
-      const textWidth = element.label.length * 8;
+      const textWidth = element.indexId.toString().length * 8;
       const textHeight = 12;
       const rectWidth = textWidth + 5;
       const rectHeight = textHeight + 4;
-      let rectX = element.x - rectWidth;
-      let rectY = element.y + element.height / 2 - textHeight / 2 - 2;
+      let rectX = paddedRect.left - rectWidth;
+      let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
       if (rectX < 0) {
-        rectX = element.x;
-        rectY = element.y - rectHeight;
+        rectX = paddedRect.left;
+        rectY = paddedRect.top - rectHeight;
       }
       image.scan(rectX, rectY, rectWidth, rectHeight, function(x, y, idx) {
         this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
@@ -203,7 +221,7 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
         rectX,
         rectY,
         {
-          text: element.label,
+          text: element.indexId.toString(),
           alignmentX: import_jimp3.default.HORIZONTAL_ALIGN_CENTER,
           alignmentY: import_jimp3.default.VERTICAL_ALIGN_MIDDLE
         },
@@ -215,64 +233,61 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
   };
   return createPngOverlay(elements, imageWidth, imageHeight);
 };
-var processImageElementInfo = async (options) => {
-  const base64Image = options.inputImgBase64.split(";base64,").pop();
-  (0, import_node_assert2.default)(base64Image, "base64Image is undefined");
-  const imageBuffer = import_node_buffer3.Buffer.from(base64Image, "base64");
+var compositeElementInfoImg = async (options) => {
+  const { inputImgBase64, elementsPositionInfo } = options;
+  const imageBuffer = import_node_buffer3.Buffer.from(inputImgBase64, "base64");
   const image = await import_jimp3.default.read(imageBuffer);
   const { width, height } = image.bitmap;
-  if (width && height) {
-    const svgOverlay = await createSvgOverlay(
-      options.elementsPositionInfo,
-      width,
-      height
-    );
-    const svgOverlayWithoutText = await createSvgOverlay(
-      options.elementsPositionInfoWithoutText,
-      width,
-      height
-    );
-    const compositeElementInfoImgBase64 = await import_jimp3.default.read(imageBuffer).then(async (image2) => {
-      const svgImage = await import_jimp3.default.read(svgOverlay);
-      return image2.composite(svgImage, 0, 0, {
-        mode: import_jimp3.default.BLEND_SOURCE_OVER,
-        opacitySource: 1,
-        opacityDest: 1
-      });
-    }).then((compositeImage) => {
-      return compositeImage.getBufferAsync(import_jimp3.default.MIME_PNG);
-    }).then((buffer) => {
-      return buffer.toString("base64");
-    }).catch((error) => {
-      throw error;
-    });
-    const compositeElementInfoImgWithoutTextBase64 = await import_jimp3.default.read(
-      imageBuffer
-    ).then(async (image2) => {
-      const svgImage = await import_jimp3.default.read(svgOverlayWithoutText);
-      return image2.composite(svgImage, 0, 0, {
-        mode: import_jimp3.default.BLEND_SOURCE_OVER,
-        opacitySource: 1,
-        opacityDest: 1
-      });
-    }).then((compositeImage) => {
-      return compositeImage.getBufferAsync(import_jimp3.default.MIME_PNG);
-    }).then((buffer) => {
-      return buffer.toString("base64");
-    }).catch((error) => {
-      throw error;
-    });
-    return {
-      compositeElementInfoImgBase64,
-      compositeElementInfoImgWithoutTextBase64
-    };
+  if (!width || !height) {
+    throw Error("Image processing failed because width or height is undefined");
   }
-  throw Error("Image processing failed because width or height is undefined");
+  const svgOverlay = await createSvgOverlay(
+    elementsPositionInfo,
+    width,
+    height
+  );
+  return await import_jimp3.default.read(imageBuffer).then(async (image2) => {
+    const svgImage = await import_jimp3.default.read(svgOverlay);
+    return image2.composite(svgImage, 0, 0, {
+      mode: import_jimp3.default.BLEND_SOURCE_OVER,
+      opacitySource: 1,
+      opacityDest: 1
+    });
+  }).then((compositeImage) => {
+    return compositeImage.getBufferAsync(import_jimp3.default.MIME_PNG);
+  }).then((buffer) => {
+    return buffer.toString("base64");
+  }).catch((error) => {
+    throw error;
+  });
+};
+var processImageElementInfo = async (options) => {
+  const base64Image = options.inputImgBase64.split(";base64,").pop();
+  (0, import_node_assert2.default)(base64Image, "base64Image is undefined");
+  const [
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64
+  ] = await Promise.all([
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfo
+    }),
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfoWithoutText
+    })
+  ]);
+  return {
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   base64Encoded,
+  base64ToPngFormat,
   calculateNewDimensions,
+  compositeElementInfoImg,
   imageInfo,
   imageInfoOfBase64,
   processImageElementInfo,

package/dist/types/img.d.ts

@@ -1,7 +1,7 @@
 import { Buffer } from 'node:buffer';
 import { NodeType } from './constants.js';
 
-interface Size {
+interface Size$1 {
     width: number;
     height: number;
 }
@@ -12,7 +12,7 @@ interface Size {
  * @returns A Promise that resolves to an object containing the width and height of the image
  * @throws Error if the image data is invalid
  */
-declare function imageInfo(image: string | Buffer): Promise<Size>;
+declare function imageInfo(image: string | Buffer): Promise<Size$1>;
 /**
  * Retrieves the dimensions of an image from a base64-encoded string
  *
@@ -20,7 +20,7 @@ declare function imageInfo(image: string | Buffer): Promise<Size>;
  * @returns A Promise that resolves to an object containing the width and height of the image
  * @throws Error if the image data is invalid
  */
-declare function imageInfoOfBase64(imageBase64: string): Promise<Size>;
+declare function imageInfoOfBase64(imageBase64: string): Promise<Size$1>;
 /**
  * Encodes an image file to a base64 encoded string
  *
@@ -32,6 +32,7 @@ declare function imageInfoOfBase64(imageBase64: string): Promise<Size>;
  * @throws When the image type is not supported, an error will be thrown
  */
 declare function base64Encoded(image: string, withHeader?: boolean): string;
+declare function base64ToPngFormat(base64: string): string;
 
 /**
  * Saves a Base64-encoded image to a file
@@ -91,17 +92,31 @@ declare function trimImage(image: string | Buffer): Promise<{
     height: number;
 } | null>;
 
-type ElementType = {
-    x: number;
-    y: number;
+interface Point {
+    left: number;
+    top: number;
+}
+interface Size {
     width: number;
     height: number;
-    label: string;
+}
+type Rect = Point & Size;
+
+type ElementType = {
+    locator: string;
+    rect: Rect;
+    center: [number, number];
+    id: string;
+    indexId: number;
     attributes: {
-        [key: string]: string;
         nodeType: NodeType;
+        [key: string]: string;
     };
 };
+declare const compositeElementInfoImg: (options: {
+    inputImgBase64: string;
+    elementsPositionInfo: Array<ElementType>;
+}) => Promise<string>;
 declare const processImageElementInfo: (options: {
     inputImgBase64: string;
     elementsPositionInfo: Array<ElementType>;
@@ -111,4 +126,4 @@ declare const processImageElementInfo: (options: {
     compositeElementInfoImgWithoutTextBase64: string;
 }>;
 
-export { base64Encoded, calculateNewDimensions, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, saveBase64Image, transformImgPathToBase64, trimImage };
+export { base64Encoded, base64ToPngFormat, calculateNewDimensions, compositeElementInfoImg, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, saveBase64Image, transformImgPathToBase64, trimImage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/shared",
-  "version": "0.5.2-beta-20241010035503.0",
+  "version": "0.5.2",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/lib/index.js",
   "module": "./dist/es/index.js",

package/src/img/box-select.ts

@@ -1,18 +1,24 @@
 import assert from 'node:assert';
 import { Buffer } from 'node:buffer';
+import type { Rect } from '@/types';
 import Jimp from 'jimp';
 import type { NodeType } from '../constants';
 
 // Define picture path
 type ElementType = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  label: string;
+  locator: string;
+
+  rect: Rect;
+
+  center: [number, number];
+
+  id: string;
+
+  indexId: number;
+
   attributes: {
-    [key: string]: string;
     nodeType: NodeType;
+    [key: string]: string;
   };
 };
 
@@ -30,26 +36,42 @@ const createSvgOverlay = (
 
     // Define color array
     const colors = [
-      { rect: 0x0000ffff, text: 0xffffffff }, // blue, white
-      { rect: 0x8b4513ff, text: 0xffffffff }, // brown, white
+      { rect: 0xff0000ff, text: 0xffffffff }, // red, white
+      // { rect: 0x0000ffff, text: 0xffffffff }, // blue, white
+      // { rect: 0x8b4513ff, text: 0xffffffff }, // brown, white
     ];
 
+    const boxPadding = 5;
     for (let index = 0; index < elements.length; index++) {
       const element = elements[index];
       const color = colors[index % colors.length];
 
+      // Add 5px padding to the rect
+      const paddedRect = {
+        left: Math.max(0, element.rect.left - boxPadding),
+        top: Math.max(0, element.rect.top - boxPadding),
+        width: Math.min(
+          imageWidth - element.rect.left,
+          element.rect.width + boxPadding * 2,
+        ),
+        height: Math.min(
+          imageHeight - element.rect.top,
+          element.rect.height + boxPadding * 2,
+        ),
+      };
+
       // Draw rectangle
       image.scan(
-        element.x,
-        element.y,
-        element.width,
-        element.height,
+        paddedRect.left,
+        paddedRect.top,
+        paddedRect.width,
+        paddedRect.height,
         function (x, y, idx) {
           if (
-            x === element.x ||
-            x === element.x + element.width - 1 ||
-            y === element.y ||
-            y === element.y + element.height - 1
+            x === paddedRect.left ||
+            x === paddedRect.left + paddedRect.width - 1 ||
+            y === paddedRect.top ||
+            y === paddedRect.top + paddedRect.height - 1
           ) {
             this.bitmap.data[idx + 0] = (color.rect >> 24) & 0xff; // R
             this.bitmap.data[idx + 1] = (color.rect >> 16) & 0xff; // G
@@ -60,17 +82,17 @@ const createSvgOverlay = (
       );
 
       // Calculate text position
-      const textWidth = element.label.length * 8;
+      const textWidth = element.indexId.toString().length * 8;
       const textHeight = 12;
       const rectWidth = textWidth + 5;
       const rectHeight = textHeight + 4;
-      let rectX = element.x - rectWidth;
-      let rectY = element.y + element.height / 2 - textHeight / 2 - 2;
+      let rectX = paddedRect.left - rectWidth;
+      let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
 
       // Check if obscured by the left
       if (rectX < 0) {
-        rectX = element.x;
-        rectY = element.y - rectHeight;
+        rectX = paddedRect.left;
+        rectY = paddedRect.top - rectHeight;
       }
 
       // Draw text background
@@ -87,7 +109,7 @@ const createSvgOverlay = (
         rectX,
         rectY,
         {
-          text: element.label,
+          text: element.indexId.toString(),
           alignmentX: Jimp.HORIZONTAL_ALIGN_CENTER,
           alignmentY: Jimp.VERTICAL_ALIGN_MIDDLE,
         },
@@ -102,78 +124,71 @@ const createSvgOverlay = (
   return createPngOverlay(elements, imageWidth, imageHeight);
 };
 
-export const processImageElementInfo = async (options: {
+export const compositeElementInfoImg = async (options: {
   inputImgBase64: string;
   elementsPositionInfo: Array<ElementType>;
-  elementsPositionInfoWithoutText: Array<ElementType>;
 }) => {
-  // Get the size of the original image
-  const base64Image = options.inputImgBase64.split(';base64,').pop();
-  assert(base64Image, 'base64Image is undefined');
-
-  const imageBuffer = Buffer.from(base64Image, 'base64');
+  const { inputImgBase64, elementsPositionInfo } = options;
+  const imageBuffer = Buffer.from(inputImgBase64, 'base64');
   const image = await Jimp.read(imageBuffer);
   const { width, height } = image.bitmap;
 
-  if (width && height) {
-    // Create svg overlay
-    const svgOverlay = await createSvgOverlay(
-      options.elementsPositionInfo,
-      width,
-      height,
-    );
-    const svgOverlayWithoutText = await createSvgOverlay(
-      options.elementsPositionInfoWithoutText,
-      width,
-      height,
-    );
-
-    // Composite picture
-    const compositeElementInfoImgBase64 = await Jimp.read(imageBuffer)
-      .then(async (image: Jimp) => {
-        const svgImage = await Jimp.read(svgOverlay);
-        return image.composite(svgImage, 0, 0, {
-          mode: Jimp.BLEND_SOURCE_OVER,
-          opacitySource: 1,
-          opacityDest: 1,
-        });
-      })
-      .then((compositeImage: Jimp) => {
-        return compositeImage.getBufferAsync(Jimp.MIME_PNG);
-      })
-      .then((buffer: Buffer) => {
-        return buffer.toString('base64');
-      })
-      .catch((error: unknown) => {
-        throw error;
-      });
+  if (!width || !height) {
+    throw Error('Image processing failed because width or height is undefined');
+  }
 
-    // Composite picture withoutText
-    const compositeElementInfoImgWithoutTextBase64 = await Jimp.read(
-      imageBuffer,
-    )
-      .then(async (image: Jimp) => {
-        const svgImage = await Jimp.read(svgOverlayWithoutText);
-        return image.composite(svgImage, 0, 0, {
-          mode: Jimp.BLEND_SOURCE_OVER,
-          opacitySource: 1,
-          opacityDest: 1,
-        });
-      })
-      .then((compositeImage: Jimp) => {
-        return compositeImage.getBufferAsync(Jimp.MIME_PNG);
-      })
-      .then((buffer: Buffer) => {
-        return buffer.toString('base64');
-      })
-      .catch((error: unknown) => {
-        throw error;
+  // Create svg overlay
+  const svgOverlay = await createSvgOverlay(
+    elementsPositionInfo,
+    width,
+    height,
+  );
+
+  return await Jimp.read(imageBuffer)
+    .then(async (image: Jimp) => {
+      const svgImage = await Jimp.read(svgOverlay);
+      return image.composite(svgImage, 0, 0, {
+        mode: Jimp.BLEND_SOURCE_OVER,
+        opacitySource: 1,
+        opacityDest: 1,
       });
+    })
+    .then((compositeImage: Jimp) => {
+      return compositeImage.getBufferAsync(Jimp.MIME_PNG);
+    })
+    .then((buffer: Buffer) => {
+      return buffer.toString('base64');
+    })
+    .catch((error: unknown) => {
+      throw error;
+    });
+};
 
-    return {
-      compositeElementInfoImgBase64,
-      compositeElementInfoImgWithoutTextBase64,
-    };
-  }
-  throw Error('Image processing failed because width or height is undefined');
+export const processImageElementInfo = async (options: {
+  inputImgBase64: string;
+  elementsPositionInfo: Array<ElementType>;
+  elementsPositionInfoWithoutText: Array<ElementType>;
+}) => {
+  // Get the size of the original image
+  const base64Image = options.inputImgBase64.split(';base64,').pop();
+  assert(base64Image, 'base64Image is undefined');
+
+  const [
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64,
+  ] = await Promise.all([
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfo,
+    }),
+    compositeElementInfoImg({
+      inputImgBase64: options.inputImgBase64,
+      elementsPositionInfo: options.elementsPositionInfoWithoutText,
+    }),
+  ]);
+
+  return {
+    compositeElementInfoImgBase64,
+    compositeElementInfoImgWithoutTextBase64,
+  };
 };

package/src/img/index.ts

@@ -1,4 +1,9 @@
-export { imageInfo, imageInfoOfBase64, base64Encoded } from './info';
+export {
+  imageInfo,
+  imageInfoOfBase64,
+  base64Encoded,
+  base64ToPngFormat,
+} from './info';
 export {
   trimImage,
   calculateNewDimensions,
@@ -6,4 +11,4 @@ export {
   transformImgPathToBase64,
   saveBase64Image,
 } from './transform';
-export { processImageElementInfo } from './box-select';
+export { processImageElementInfo, compositeElementInfoImg } from './box-select';

package/src/img/info.ts

@@ -69,3 +69,7 @@ export function base64Encoded(image: string, withHeader = true) {
   }
   throw new Error('unsupported image type');
 }
+
+export function base64ToPngFormat(base64: string) {
+  return `data:image/png;base64,${base64}`;
+}