@midscene/shared 0.8.16 → 0.8.17-beta-20250103065754.0

package/dist/browser/img.d.ts

@@ -141,4 +141,20 @@ declare const processImageElementInfo: (options: {
     compositeElementInfoImgWithoutTextBase64: string;
 }>;
 
-export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, transformImgPathToBase64, trimImage };
+declare function drawBoxOnImage(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+}): Promise<string>;
+declare function savePositionImg(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+    outputPath: string;
+}): Promise<void>;
+
+export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage };

package/dist/browser/img.js

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __pow = Math.pow;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -55,12 +56,14 @@ __export(img_exports, {
   bufferFromBase64: () => bufferFromBase64,
   calculateNewDimensions: () => calculateNewDimensions,
   compositeElementInfoImg: () => compositeElementInfoImg,
+  drawBoxOnImage: () => drawBoxOnImage,
   imageInfo: () => imageInfo,
   imageInfoOfBase64: () => imageInfoOfBase64,
   processImageElementInfo: () => processImageElementInfo,
   resizeImg: () => resizeImg,
   resizeImgBase64: () => resizeImgBase64,
   saveBase64Image: () => saveBase64Image,
+  savePositionImg: () => savePositionImg,
   transformImgPathToBase64: () => transformImgPathToBase64,
   trimImage: () => trimImage
 });
@@ -401,3 +404,44 @@ var processImageElementInfo = (options) => __async(void 0, null, function* () {
     compositeElementInfoImgWithoutTextBase64
   };
 });
+
+// src/img/draw-box.ts
+function drawBoxOnImage(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect } = options;
+    const color = { r: 255, g: 0, b: 0, a: 255 };
+    const Jimp = yield getJimp();
+    const imageBuffer = yield bufferFromBase64(inputImgBase64);
+    const image = yield Jimp.read(imageBuffer);
+    const centerX = rect.x;
+    const centerY = rect.y;
+    const radius = 5;
+    image.scan(
+      Math.floor(centerX - radius),
+      Math.floor(centerY - radius),
+      radius * 2,
+      radius * 2,
+      function(x, y, idx) {
+        const distance = Math.sqrt(__pow(x - centerX, 2) + __pow(y - centerY, 2));
+        if (distance <= radius) {
+          this.bitmap.data[idx + 0] = color.r;
+          this.bitmap.data[idx + 1] = color.g;
+          this.bitmap.data[idx + 2] = color.b;
+          this.bitmap.data[idx + 3] = color.a;
+        }
+      }
+    );
+    const resultBase64 = yield image.getBase64Async(Jimp.MIME_PNG);
+    return resultBase64;
+  });
+}
+function savePositionImg(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect, outputPath } = options;
+    const imgBase64 = yield drawBoxOnImage({ inputImgBase64, rect });
+    yield saveBase64Image({
+      base64Data: imgBase64,
+      outputPath
+    });
+  });
+}

package/dist/es/img.d.ts

@@ -141,4 +141,20 @@ declare const processImageElementInfo: (options: {
     compositeElementInfoImgWithoutTextBase64: string;
 }>;
 
-export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, transformImgPathToBase64, trimImage };
+declare function drawBoxOnImage(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+}): Promise<string>;
+declare function savePositionImg(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+    outputPath: string;
+}): Promise<void>;
+
+export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage };

package/dist/es/img.js

@@ -1,3 +1,4 @@
+var __pow = Math.pow;
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -354,18 +355,61 @@ var processImageElementInfo = (options) => __async(void 0, null, function* () {
     compositeElementInfoImgWithoutTextBase64
   };
 });
+
+// src/img/draw-box.ts
+function drawBoxOnImage(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect } = options;
+    const color = { r: 255, g: 0, b: 0, a: 255 };
+    const Jimp = yield getJimp();
+    const imageBuffer = yield bufferFromBase64(inputImgBase64);
+    const image = yield Jimp.read(imageBuffer);
+    const centerX = rect.x;
+    const centerY = rect.y;
+    const radius = 5;
+    image.scan(
+      Math.floor(centerX - radius),
+      Math.floor(centerY - radius),
+      radius * 2,
+      radius * 2,
+      function(x, y, idx) {
+        const distance = Math.sqrt(__pow(x - centerX, 2) + __pow(y - centerY, 2));
+        if (distance <= radius) {
+          this.bitmap.data[idx + 0] = color.r;
+          this.bitmap.data[idx + 1] = color.g;
+          this.bitmap.data[idx + 2] = color.b;
+          this.bitmap.data[idx + 3] = color.a;
+        }
+      }
+    );
+    const resultBase64 = yield image.getBase64Async(Jimp.MIME_PNG);
+    return resultBase64;
+  });
+}
+function savePositionImg(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect, outputPath } = options;
+    const imgBase64 = yield drawBoxOnImage({ inputImgBase64, rect });
+    yield saveBase64Image({
+      base64Data: imgBase64,
+      outputPath
+    });
+  });
+}
 export {
   base64Encoded,
   base64ToPngFormat,
   bufferFromBase64,
   calculateNewDimensions,
   compositeElementInfoImg,
+  drawBoxOnImage,
   imageInfo,
   imageInfoOfBase64,
   processImageElementInfo,
   resizeImg,
   resizeImgBase64,
   saveBase64Image,
+  savePositionImg,
   transformImgPathToBase64,
   trimImage
 };

package/dist/lib/img.d.ts

@@ -141,4 +141,20 @@ declare const processImageElementInfo: (options: {
     compositeElementInfoImgWithoutTextBase64: string;
 }>;
 
-export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, transformImgPathToBase64, trimImage };
+declare function drawBoxOnImage(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+}): Promise<string>;
+declare function savePositionImg(options: {
+    inputImgBase64: string;
+    rect: {
+        x: number;
+        y: number;
+    };
+    outputPath: string;
+}): Promise<void>;
+
+export { base64Encoded, base64ToPngFormat, bufferFromBase64, calculateNewDimensions, compositeElementInfoImg, drawBoxOnImage, imageInfo, imageInfoOfBase64, processImageElementInfo, resizeImg, resizeImgBase64, saveBase64Image, savePositionImg, transformImgPathToBase64, trimImage };

package/dist/lib/img.js

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __pow = Math.pow;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -55,12 +56,14 @@ __export(img_exports, {
   bufferFromBase64: () => bufferFromBase64,
   calculateNewDimensions: () => calculateNewDimensions,
   compositeElementInfoImg: () => compositeElementInfoImg,
+  drawBoxOnImage: () => drawBoxOnImage,
   imageInfo: () => imageInfo,
   imageInfoOfBase64: () => imageInfoOfBase64,
   processImageElementInfo: () => processImageElementInfo,
   resizeImg: () => resizeImg,
   resizeImgBase64: () => resizeImgBase64,
   saveBase64Image: () => saveBase64Image,
+  savePositionImg: () => savePositionImg,
   transformImgPathToBase64: () => transformImgPathToBase64,
   trimImage: () => trimImage
 });
@@ -401,6 +404,47 @@ var processImageElementInfo = (options) => __async(void 0, null, function* () {
     compositeElementInfoImgWithoutTextBase64
   };
 });
+
+// src/img/draw-box.ts
+function drawBoxOnImage(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect } = options;
+    const color = { r: 255, g: 0, b: 0, a: 255 };
+    const Jimp = yield getJimp();
+    const imageBuffer = yield bufferFromBase64(inputImgBase64);
+    const image = yield Jimp.read(imageBuffer);
+    const centerX = rect.x;
+    const centerY = rect.y;
+    const radius = 5;
+    image.scan(
+      Math.floor(centerX - radius),
+      Math.floor(centerY - radius),
+      radius * 2,
+      radius * 2,
+      function(x, y, idx) {
+        const distance = Math.sqrt(__pow(x - centerX, 2) + __pow(y - centerY, 2));
+        if (distance <= radius) {
+          this.bitmap.data[idx + 0] = color.r;
+          this.bitmap.data[idx + 1] = color.g;
+          this.bitmap.data[idx + 2] = color.b;
+          this.bitmap.data[idx + 3] = color.a;
+        }
+      }
+    );
+    const resultBase64 = yield image.getBase64Async(Jimp.MIME_PNG);
+    return resultBase64;
+  });
+}
+function savePositionImg(options) {
+  return __async(this, null, function* () {
+    const { inputImgBase64, rect, outputPath } = options;
+    const imgBase64 = yield drawBoxOnImage({ inputImgBase64, rect });
+    yield saveBase64Image({
+      base64Data: imgBase64,
+      outputPath
+    });
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   base64Encoded,
@@ -408,12 +452,14 @@ var processImageElementInfo = (options) => __async(void 0, null, function* () {
   bufferFromBase64,
   calculateNewDimensions,
   compositeElementInfoImg,
+  drawBoxOnImage,
   imageInfo,
   imageInfoOfBase64,
   processImageElementInfo,
   resizeImg,
   resizeImgBase64,
   saveBase64Image,
+  savePositionImg,
   transformImgPathToBase64,
   trimImage
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/shared",
-  "version": "0.8.16",
+  "version": "0.8.17-beta-20250103065754.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./src/index.ts",

package/src/img/draw-box.ts

@@ -0,0 +1,60 @@
+import type { Buffer } from 'node:buffer';
+import type { Rect } from '@/types';
+import getJimp from './get-jimp';
+import { bufferFromBase64 } from './info';
+import { saveBase64Image } from './transform';
+
+export async function drawBoxOnImage(options: {
+  inputImgBase64: string;
+  rect: { x: number; y: number };
+}) {
+  const { inputImgBase64, rect } = options;
+  const color = { r: 255, g: 0, b: 0, a: 255 }; // Default to red
+
+  const Jimp = await getJimp();
+  const imageBuffer = await bufferFromBase64(inputImgBase64);
+  const image = await Jimp.read(imageBuffer);
+
+  // Draw a circle dot at the center of the rect
+  const centerX = rect.x;
+  const centerY = rect.y;
+  const radius = 5; // Radius of the dot
+
+  // Scan a square area around the center point
+  image.scan(
+    Math.floor(centerX - radius),
+    Math.floor(centerY - radius),
+    radius * 2,
+    radius * 2,
+    function (x, y, idx) {
+      // Calculate distance from current pixel to center
+      const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+
+      // If distance is less than radius, color the pixel
+      if (distance <= radius) {
+        this.bitmap.data[idx + 0] = color.r;
+        this.bitmap.data[idx + 1] = color.g;
+        this.bitmap.data[idx + 2] = color.b;
+        this.bitmap.data[idx + 3] = color.a;
+      }
+    },
+  );
+
+  // Convert back to base64
+  const resultBase64 = await image.getBase64Async(Jimp.MIME_PNG);
+  return resultBase64;
+}
+
+export async function savePositionImg(options: {
+  inputImgBase64: string;
+  rect: { x: number; y: number };
+  outputPath: string;
+}) {
+  const { inputImgBase64, rect, outputPath } = options;
+  const imgBase64 = await drawBoxOnImage({ inputImgBase64, rect });
+  //   console.log('outputPath', outputPath);
+  await saveBase64Image({
+    base64Data: imgBase64,
+    outputPath,
+  });
+}

package/src/img/index.ts

@@ -14,3 +14,4 @@ export {
   saveBase64Image,
 } from './transform';
 export { processImageElementInfo, compositeElementInfoImg } from './box-select';
+export { drawBoxOnImage, savePositionImg } from './draw-box';