@midscene/shared 1.10.6 → 1.10.7-beta-20260720030503.0

package/dist/es/cli/screenshot-file.mjs

@@ -1,14 +1,15 @@
 import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
 import { join } from "node:path";
+import { screenshotImageFormatFromExtension, screenshotImageFormatFromMimeType } from "../img/image-format.mjs";
 function safeScreenshotFilenamePart(value) {
     const text = 'string' == typeof value && value.length > 0 ? value : 'shot';
     return text.replace(/[^a-zA-Z0-9._-]/g, '_') || 'shot';
 }
 function extensionFromImageMetadata(mimeType, extension) {
-    if ('jpeg' === extension || 'jpg' === extension) return 'jpeg';
-    if ('png' === extension) return 'png';
-    return 'image/jpeg' === mimeType ? 'jpeg' : 'png';
+    const extensionFormat = screenshotImageFormatFromExtension(extension);
+    if (extensionFormat) return extensionFormat;
+    return screenshotImageFormatFromMimeType(mimeType) ?? 'png';
 }
 function writeCliScreenshotFile(rawBase64, options = {}) {
     const extension = extensionFromImageMetadata(options.mimeType, options.extension);

package/dist/es/cli/verbose-screenshot.mjs

@@ -30,7 +30,7 @@ function screenshotRawBase64(value) {
     const rawBase64 = getStringProperty(value, 'rawBase64');
     if (rawBase64) return rawBase64;
     const base64 = getStringProperty(value, 'base64');
-    const match = base64?.match(/^data:image\/(?:png|jpeg|jpg);base64,(.+)$/);
+    const match = base64?.match(/^data:image\/(?:png|jpeg|jpg|webp);base64,(.+)$/);
     return match?.[1];
 }
 function inlineScreenshotCacheKey(rawBase64, serialized, directoryPath, directoryName, extension) {

package/dist/es/env/parse-model-config.mjs

@@ -5,7 +5,7 @@ import { assert } from "../utils.mjs";
 import { maskConfig, parseJson } from "./helper.mjs";
 import { initDebugConfig } from "./init-debug.mjs";
 const MODEL_CONFIG_DOC_URL = 'https://midscenejs.com/model-common-config.html';
-const getCurrentVersion = ()=>"1.10.6";
+const getCurrentVersion = ()=>"1.10.7-beta-20260720030503.0";
 const getInvalidModelFamilyMessage = (modelFamily)=>`Invalid MIDSCENE_MODEL_FAMILY value: ${modelFamily}. Current version v${getCurrentVersion()} accepts the following model families: ${MODEL_FAMILY_VALUES.join(', ')}. You can also visit ${MODEL_CONFIG_DOC_URL} for the latest configuration information.`;
 const KEYS_MAP = {
     insight: INSIGHT_MODEL_CONFIG_KEYS,

package/dist/es/img/canvas-fallback.mjs

@@ -1,4 +1,5 @@
 import { getDebug } from "../logger.mjs";
+import { detectScreenshotImageFormatFromBuffer, inferScreenshotImageFormatFromBase64, screenshotImageMimeType } from "./image-format.mjs";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -52,15 +53,19 @@ class CanvasImage {
                 reject(new Error('Failed to load image'));
             };
             if (base64Body.startsWith('data:')) img.src = base64Body;
-            else img.src = `data:image/png;base64,${base64Body}`;
+            else {
+                const format = inferScreenshotImageFormatFromBase64(base64Body) ?? 'png';
+                img.src = `data:${screenshotImageMimeType(format)};base64,${base64Body}`;
+            }
         });
     }
     static async new_from_byteslice(bytes) {
         return new Promise((resolve, reject)=>{
+            const format = detectScreenshotImageFormatFromBuffer(bytes) ?? 'png';
             const blob = new Blob([
                 bytes
             ], {
-                type: 'image/png'
+                type: screenshotImageMimeType(format)
             });
             const url = URL.createObjectURL(blob);
             const img = new Image();

package/dist/es/img/image-format.mjs

@@ -0,0 +1,54 @@
+const mimeTypeByFormat = {
+    png: 'image/png',
+    jpeg: 'image/jpeg',
+    webp: 'image/webp'
+};
+function screenshotImageMimeType(format) {
+    return mimeTypeByFormat[format];
+}
+function screenshotImageExtension(format) {
+    return format;
+}
+function screenshotImageFormatFromExtension(extension) {
+    if ('string' != typeof extension) return;
+    switch(extension.toLowerCase()){
+        case 'png':
+            return 'png';
+        case 'jpeg':
+        case 'jpg':
+            return 'jpeg';
+        case 'webp':
+            return 'webp';
+        default:
+            return;
+    }
+}
+function screenshotImageFormatFromMimeType(mimeType) {
+    if ('string' != typeof mimeType) return;
+    switch(mimeType.toLowerCase()){
+        case 'image/png':
+            return 'png';
+        case 'image/jpeg':
+        case 'image/jpg':
+            return 'jpeg';
+        case 'image/webp':
+            return 'webp';
+        default:
+            return;
+    }
+}
+function isScreenshotImageMimeType(mimeType) {
+    return 'image/png' === mimeType || 'image/jpeg' === mimeType || 'image/webp' === mimeType;
+}
+function inferScreenshotImageFormatFromBase64(base64Body) {
+    const normalizedBody = base64Body.replace(/\s/g, '');
+    if (normalizedBody.startsWith('iVBORw0KGgo')) return 'png';
+    if (normalizedBody.startsWith('/9j/')) return 'jpeg';
+    if (normalizedBody.startsWith('UklGR')) return 'webp';
+}
+function detectScreenshotImageFormatFromBuffer(buffer) {
+    if (buffer.length >= 8 && 0x89 === buffer[0] && 0x50 === buffer[1] && 0x4e === buffer[2] && 0x47 === buffer[3] && 0x0d === buffer[4] && 0x0a === buffer[5] && 0x1a === buffer[6] && 0x0a === buffer[7]) return 'png';
+    if (buffer.length >= 3 && 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2]) return 'jpeg';
+    if (buffer.length >= 12 && 0x52 === buffer[0] && 0x49 === buffer[1] && 0x46 === buffer[2] && 0x46 === buffer[3] && 0x57 === buffer[8] && 0x45 === buffer[9] && 0x42 === buffer[10] && 0x50 === buffer[11]) return 'webp';
+}
+export { detectScreenshotImageFormatFromBuffer, inferScreenshotImageFormatFromBase64, isScreenshotImageMimeType, screenshotImageExtension, screenshotImageFormatFromExtension, screenshotImageFormatFromMimeType, screenshotImageMimeType };

package/dist/es/img/index.mjs

@@ -1,4 +1,5 @@
-import { imageInfoOfBase64, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, validateScreenshotBuffer } from "./info.mjs";
+import { imageInfoOfBase64, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, isValidWebPImageBuffer, validateScreenshotBuffer } from "./info.mjs";
+import { detectScreenshotImageFormatFromBuffer, inferScreenshotImageFormatFromBase64, isScreenshotImageMimeType, screenshotImageExtension, screenshotImageFormatFromExtension, screenshotImageFormatFromMimeType, screenshotImageMimeType } from "./image-format.mjs";
 import { convertImgBufferToJpeg, createImgBase64ByFormat, cropByRect, httpImg2Base64, inferBase64ImageFormat, localImg2Base64, normalizeBase64Image, normalizeScreenshotBase64, paddingToMatchBlockByBase64, parseBase64, preProcessImageUrl, resizeAndConvertImgBuffer, resizeImgBase64, saveBase64Image, scaleImage, zoomForGPT4o } from "./transform.mjs";
 import { annotateRects, compositeElementInfoImg, compositePointMarkerImg, processImageElementInfo } from "./box-select.mjs";
-export { annotateRects, compositeElementInfoImg, compositePointMarkerImg, convertImgBufferToJpeg, createImgBase64ByFormat, cropByRect, httpImg2Base64, imageInfoOfBase64, inferBase64ImageFormat, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, localImg2Base64, normalizeBase64Image, normalizeScreenshotBase64, paddingToMatchBlockByBase64, parseBase64, preProcessImageUrl, processImageElementInfo, resizeAndConvertImgBuffer, resizeImgBase64, saveBase64Image, scaleImage, validateScreenshotBuffer, zoomForGPT4o };
+export { annotateRects, compositeElementInfoImg, compositePointMarkerImg, convertImgBufferToJpeg, createImgBase64ByFormat, cropByRect, detectScreenshotImageFormatFromBuffer, httpImg2Base64, imageInfoOfBase64, inferBase64ImageFormat, inferScreenshotImageFormatFromBase64, isScreenshotImageMimeType, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, isValidWebPImageBuffer, localImg2Base64, normalizeBase64Image, normalizeScreenshotBase64, paddingToMatchBlockByBase64, parseBase64, preProcessImageUrl, processImageElementInfo, resizeAndConvertImgBuffer, resizeImgBase64, saveBase64Image, scaleImage, screenshotImageExtension, screenshotImageFormatFromExtension, screenshotImageFormatFromMimeType, screenshotImageMimeType, validateScreenshotBuffer, zoomForGPT4o };

package/dist/es/img/info.mjs

@@ -3,6 +3,7 @@ import { Buffer } from "node:buffer";
 import { ifInNode } from "../utils.mjs";
 import get_photon from "./get-photon.mjs";
 import get_sharp from "./get-sharp.mjs";
+import { detectScreenshotImageFormatFromBuffer } from "./image-format.mjs";
 async function imageInfoOfBase64(imageBase64) {
     const base64Data = imageBase64.replace(/^data:image\/\w+;base64,/, '').replace(/\s/g, '');
     node_assert(base64Data, 'Invalid image: empty base64 data');
@@ -68,8 +69,11 @@ function isValidJPEGImageBuffer(buffer) {
     if (!buffer || buffer.length < 3) return false;
     return 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2];
 }
+function isValidWebPImageBuffer(buffer) {
+    return 'webp' === detectScreenshotImageFormatFromBuffer(buffer);
+}
 function isValidImageBuffer(buffer) {
-    return isValidPNGImageBuffer(buffer) || isValidJPEGImageBuffer(buffer);
+    return isValidPNGImageBuffer(buffer) || isValidJPEGImageBuffer(buffer) || isValidWebPImageBuffer(buffer);
 }
 function validateScreenshotBuffer(screenshotBuffer, { label, minBufferSize = 0 }) {
     const bufferSize = screenshotBuffer?.length ?? 0;
@@ -77,4 +81,4 @@ function validateScreenshotBuffer(screenshotBuffer, { label, minBufferSize = 0 }
     if (!isValidImageBuffer(screenshotBuffer)) throw new Error(`${label} buffer has invalid image format`);
     if (minBufferSize > 0 && bufferSize < minBufferSize) throw new Error(`${label} validation failed: buffer size ${bufferSize} bytes (minimum: ${minBufferSize})`);
 }
-export { imageInfoOfBase64, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, validateScreenshotBuffer };
+export { imageInfoOfBase64, isValidImageBuffer, isValidJPEGImageBuffer, isValidPNGImageBuffer, isValidWebPImageBuffer, validateScreenshotBuffer };

package/dist/es/img/transform.mjs

@@ -7,6 +7,7 @@ import { getDebug } from "../logger.mjs";
 import { ifInNode } from "../utils.mjs";
 import get_photon from "./get-photon.mjs";
 import get_sharp from "./get-sharp.mjs";
+import { detectScreenshotImageFormatFromBuffer, inferScreenshotImageFormatFromBase64, screenshotImageMimeType } from "./image-format.mjs";
 const imgDebug = getDebug('img');
 async function saveBase64Image(options) {
     const { base64Data, outputPath } = options;
@@ -86,17 +87,13 @@ async function convertImgBufferToJpeg(inputData, quality = 90) {
     }
 }
 const base64ImageDataUrlPattern = /^data:image\/[a-zA-Z0-9.+-]+;base64,/i;
-const supportedScreenshotDataUriPattern = /^data:image\/(png|jpe?g);base64,([\s\S]*)$/i;
+const supportedScreenshotDataUriPattern = /^data:image\/(png|jpe?g|webp);base64,([\s\S]*)$/i;
 const rawBase64BodyPattern = /^[A-Za-z0-9+/=\s]+$/;
-const inferBase64ImageFormat = (base64Body)=>{
-    if (base64Body.startsWith('iVBORw0KGgo')) return 'png';
-    return 'jpeg';
-};
+const inferBase64ImageFormat = (base64Body)=>inferScreenshotImageFormatFromBase64(base64Body) ?? 'jpeg';
 function detectImageMimeTypeFromBuffer(buffer) {
-    if (buffer.length >= 8 && 0x89 === buffer[0] && 0x50 === buffer[1] && 0x4e === buffer[2] && 0x47 === buffer[3] && 0x0d === buffer[4] && 0x0a === buffer[5] && 0x1a === buffer[6] && 0x0a === buffer[7]) return 'image/png';
-    if (buffer.length >= 3 && 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2]) return 'image/jpeg';
+    const screenshotFormat = detectScreenshotImageFormatFromBuffer(buffer);
+    if (screenshotFormat) return screenshotImageMimeType(screenshotFormat);
     if (buffer.length >= 6 && 'GIF' === buffer.subarray(0, 3).toString('ascii')) return 'image/gif';
-    if (buffer.length >= 12 && 'RIFF' === buffer.subarray(0, 4).toString('ascii') && 'WEBP' === buffer.subarray(8, 12).toString('ascii')) return 'image/webp';
     if (buffer.length >= 2 && 0x42 === buffer[0] && 0x4d === buffer[1]) return 'image/bmp';
 }
 const createImgBase64ByFormat = (format, body)=>`data:image/${format};base64,${normalizeBase64Body(body)}`;
@@ -111,9 +108,11 @@ const normalizeScreenshotBase64 = (base64, options)=>{
         if (!normalizeBase64Body(body)) throw new Error(`${label} cannot be empty`);
         return createImgBase64ByFormat(imageFormat, body);
     }
-    if (trimmedBase64.startsWith('data:')) throw new Error(`${label} must be a PNG/JPEG data URI or raw PNG base64 string`);
-    if (!rawBase64BodyPattern.test(trimmedBase64)) throw new Error(`${label} must be a PNG/JPEG data URI or raw PNG base64 string`);
-    return createImgBase64ByFormat('png', trimmedBase64);
+    if (trimmedBase64.startsWith('data:')) throw new Error(`${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`);
+    if (!rawBase64BodyPattern.test(trimmedBase64)) throw new Error(`${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`);
+    const base64Body = normalizeBase64Body(trimmedBase64);
+    const inferredFormat = inferScreenshotImageFormatFromBase64(base64Body);
+    return createImgBase64ByFormat('webp' === inferredFormat ? 'webp' : 'png', base64Body);
 };
 const normalizeBase64Image = (base64)=>{
     const trimmedBase64 = base64.trim();

package/dist/lib/cli/screenshot-file.js

@@ -29,14 +29,15 @@ __webpack_require__.d(__webpack_exports__, {
 const external_node_fs_namespaceObject = require("node:fs");
 const external_node_os_namespaceObject = require("node:os");
 const external_node_path_namespaceObject = require("node:path");
+const image_format_js_namespaceObject = require("../img/image-format.js");
 function safeScreenshotFilenamePart(value) {
     const text = 'string' == typeof value && value.length > 0 ? value : 'shot';
     return text.replace(/[^a-zA-Z0-9._-]/g, '_') || 'shot';
 }
 function extensionFromImageMetadata(mimeType, extension) {
-    if ('jpeg' === extension || 'jpg' === extension) return 'jpeg';
-    if ('png' === extension) return 'png';
-    return 'image/jpeg' === mimeType ? 'jpeg' : 'png';
+    const extensionFormat = (0, image_format_js_namespaceObject.screenshotImageFormatFromExtension)(extension);
+    if (extensionFormat) return extensionFormat;
+    return (0, image_format_js_namespaceObject.screenshotImageFormatFromMimeType)(mimeType) ?? 'png';
 }
 function writeCliScreenshotFile(rawBase64, options = {}) {
     const extension = extensionFromImageMetadata(options.mimeType, options.extension);

package/dist/lib/cli/verbose-screenshot.js

@@ -61,7 +61,7 @@ function screenshotRawBase64(value) {
     const rawBase64 = getStringProperty(value, 'rawBase64');
     if (rawBase64) return rawBase64;
     const base64 = getStringProperty(value, 'base64');
-    const match = base64?.match(/^data:image\/(?:png|jpeg|jpg);base64,(.+)$/);
+    const match = base64?.match(/^data:image\/(?:png|jpeg|jpg|webp);base64,(.+)$/);
     return match?.[1];
 }
 function inlineScreenshotCacheKey(rawBase64, serialized, directoryPath, directoryName, extension) {

package/dist/lib/env/parse-model-config.js

@@ -37,7 +37,7 @@ const external_utils_js_namespaceObject = require("../utils.js");
 const external_helper_js_namespaceObject = require("./helper.js");
 const external_init_debug_js_namespaceObject = require("./init-debug.js");
 const MODEL_CONFIG_DOC_URL = 'https://midscenejs.com/model-common-config.html';
-const getCurrentVersion = ()=>"1.10.6";
+const getCurrentVersion = ()=>"1.10.7-beta-20260720030503.0";
 const getInvalidModelFamilyMessage = (modelFamily)=>`Invalid MIDSCENE_MODEL_FAMILY value: ${modelFamily}. Current version v${getCurrentVersion()} accepts the following model families: ${external_types_js_namespaceObject.MODEL_FAMILY_VALUES.join(', ')}. You can also visit ${MODEL_CONFIG_DOC_URL} for the latest configuration information.`;
 const KEYS_MAP = {
     insight: external_constants_js_namespaceObject.INSIGHT_MODEL_CONFIG_KEYS,

package/dist/lib/img/canvas-fallback.js

@@ -38,6 +38,7 @@ __webpack_require__.d(__webpack_exports__, {
     canvasWatermark: ()=>canvasWatermark
 });
 const external_logger_js_namespaceObject = require("../logger.js");
+const external_image_format_js_namespaceObject = require("./image-format.js");
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -91,15 +92,19 @@ class CanvasImage {
                 reject(new Error('Failed to load image'));
             };
             if (base64Body.startsWith('data:')) img.src = base64Body;
-            else img.src = `data:image/png;base64,${base64Body}`;
+            else {
+                const format = (0, external_image_format_js_namespaceObject.inferScreenshotImageFormatFromBase64)(base64Body) ?? 'png';
+                img.src = `data:${(0, external_image_format_js_namespaceObject.screenshotImageMimeType)(format)};base64,${base64Body}`;
+            }
         });
     }
     static async new_from_byteslice(bytes) {
         return new Promise((resolve, reject)=>{
+            const format = (0, external_image_format_js_namespaceObject.detectScreenshotImageFormatFromBuffer)(bytes) ?? 'png';
             const blob = new Blob([
                 bytes
             ], {
-                type: 'image/png'
+                type: (0, external_image_format_js_namespaceObject.screenshotImageMimeType)(format)
             });
             const url = URL.createObjectURL(blob);
             const img = new Image();

package/dist/lib/img/image-format.js

@@ -0,0 +1,106 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    detectScreenshotImageFormatFromBuffer: ()=>detectScreenshotImageFormatFromBuffer,
+    inferScreenshotImageFormatFromBase64: ()=>inferScreenshotImageFormatFromBase64,
+    isScreenshotImageMimeType: ()=>isScreenshotImageMimeType,
+    screenshotImageExtension: ()=>screenshotImageExtension,
+    screenshotImageFormatFromExtension: ()=>screenshotImageFormatFromExtension,
+    screenshotImageFormatFromMimeType: ()=>screenshotImageFormatFromMimeType,
+    screenshotImageMimeType: ()=>screenshotImageMimeType
+});
+const mimeTypeByFormat = {
+    png: 'image/png',
+    jpeg: 'image/jpeg',
+    webp: 'image/webp'
+};
+function screenshotImageMimeType(format) {
+    return mimeTypeByFormat[format];
+}
+function screenshotImageExtension(format) {
+    return format;
+}
+function screenshotImageFormatFromExtension(extension) {
+    if ('string' != typeof extension) return;
+    switch(extension.toLowerCase()){
+        case 'png':
+            return 'png';
+        case 'jpeg':
+        case 'jpg':
+            return 'jpeg';
+        case 'webp':
+            return 'webp';
+        default:
+            return;
+    }
+}
+function screenshotImageFormatFromMimeType(mimeType) {
+    if ('string' != typeof mimeType) return;
+    switch(mimeType.toLowerCase()){
+        case 'image/png':
+            return 'png';
+        case 'image/jpeg':
+        case 'image/jpg':
+            return 'jpeg';
+        case 'image/webp':
+            return 'webp';
+        default:
+            return;
+    }
+}
+function isScreenshotImageMimeType(mimeType) {
+    return 'image/png' === mimeType || 'image/jpeg' === mimeType || 'image/webp' === mimeType;
+}
+function inferScreenshotImageFormatFromBase64(base64Body) {
+    const normalizedBody = base64Body.replace(/\s/g, '');
+    if (normalizedBody.startsWith('iVBORw0KGgo')) return 'png';
+    if (normalizedBody.startsWith('/9j/')) return 'jpeg';
+    if (normalizedBody.startsWith('UklGR')) return 'webp';
+}
+function detectScreenshotImageFormatFromBuffer(buffer) {
+    if (buffer.length >= 8 && 0x89 === buffer[0] && 0x50 === buffer[1] && 0x4e === buffer[2] && 0x47 === buffer[3] && 0x0d === buffer[4] && 0x0a === buffer[5] && 0x1a === buffer[6] && 0x0a === buffer[7]) return 'png';
+    if (buffer.length >= 3 && 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2]) return 'jpeg';
+    if (buffer.length >= 12 && 0x52 === buffer[0] && 0x49 === buffer[1] && 0x46 === buffer[2] && 0x46 === buffer[3] && 0x57 === buffer[8] && 0x45 === buffer[9] && 0x42 === buffer[10] && 0x50 === buffer[11]) return 'webp';
+}
+exports.detectScreenshotImageFormatFromBuffer = __webpack_exports__.detectScreenshotImageFormatFromBuffer;
+exports.inferScreenshotImageFormatFromBase64 = __webpack_exports__.inferScreenshotImageFormatFromBase64;
+exports.isScreenshotImageMimeType = __webpack_exports__.isScreenshotImageMimeType;
+exports.screenshotImageExtension = __webpack_exports__.screenshotImageExtension;
+exports.screenshotImageFormatFromExtension = __webpack_exports__.screenshotImageFormatFromExtension;
+exports.screenshotImageFormatFromMimeType = __webpack_exports__.screenshotImageFormatFromMimeType;
+exports.screenshotImageMimeType = __webpack_exports__.screenshotImageMimeType;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "detectScreenshotImageFormatFromBuffer",
+    "inferScreenshotImageFormatFromBase64",
+    "isScreenshotImageMimeType",
+    "screenshotImageExtension",
+    "screenshotImageFormatFromExtension",
+    "screenshotImageFormatFromMimeType",
+    "screenshotImageMimeType"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/img/index.js

@@ -25,32 +25,41 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     convertImgBufferToJpeg: ()=>external_transform_js_namespaceObject.convertImgBufferToJpeg,
-    inferBase64ImageFormat: ()=>external_transform_js_namespaceObject.inferBase64ImageFormat,
-    localImg2Base64: ()=>external_transform_js_namespaceObject.localImg2Base64,
+    detectScreenshotImageFormatFromBuffer: ()=>external_image_format_js_namespaceObject.detectScreenshotImageFormatFromBuffer,
     paddingToMatchBlockByBase64: ()=>external_transform_js_namespaceObject.paddingToMatchBlockByBase64,
-    parseBase64: ()=>external_transform_js_namespaceObject.parseBase64,
-    resizeAndConvertImgBuffer: ()=>external_transform_js_namespaceObject.resizeAndConvertImgBuffer,
     resizeImgBase64: ()=>external_transform_js_namespaceObject.resizeImgBase64,
     saveBase64Image: ()=>external_transform_js_namespaceObject.saveBase64Image,
     isValidImageBuffer: ()=>external_info_js_namespaceObject.isValidImageBuffer,
     validateScreenshotBuffer: ()=>external_info_js_namespaceObject.validateScreenshotBuffer,
-    normalizeScreenshotBase64: ()=>external_transform_js_namespaceObject.normalizeScreenshotBase64,
     preProcessImageUrl: ()=>external_transform_js_namespaceObject.preProcessImageUrl,
-    annotateRects: ()=>external_box_select_js_namespaceObject.annotateRects,
-    compositeElementInfoImg: ()=>external_box_select_js_namespaceObject.compositeElementInfoImg,
-    isValidPNGImageBuffer: ()=>external_info_js_namespaceObject.isValidPNGImageBuffer,
-    normalizeBase64Image: ()=>external_transform_js_namespaceObject.normalizeBase64Image,
-    compositePointMarkerImg: ()=>external_box_select_js_namespaceObject.compositePointMarkerImg,
     cropByRect: ()=>external_transform_js_namespaceObject.cropByRect,
-    isValidJPEGImageBuffer: ()=>external_info_js_namespaceObject.isValidJPEGImageBuffer,
+    compositeElementInfoImg: ()=>external_box_select_js_namespaceObject.compositeElementInfoImg,
     processImageElementInfo: ()=>external_box_select_js_namespaceObject.processImageElementInfo,
+    normalizeBase64Image: ()=>external_transform_js_namespaceObject.normalizeBase64Image,
     scaleImage: ()=>external_transform_js_namespaceObject.scaleImage,
     zoomForGPT4o: ()=>external_transform_js_namespaceObject.zoomForGPT4o,
     createImgBase64ByFormat: ()=>external_transform_js_namespaceObject.createImgBase64ByFormat,
     imageInfoOfBase64: ()=>external_info_js_namespaceObject.imageInfoOfBase64,
-    httpImg2Base64: ()=>external_transform_js_namespaceObject.httpImg2Base64
+    httpImg2Base64: ()=>external_transform_js_namespaceObject.httpImg2Base64,
+    inferBase64ImageFormat: ()=>external_transform_js_namespaceObject.inferBase64ImageFormat,
+    localImg2Base64: ()=>external_transform_js_namespaceObject.localImg2Base64,
+    screenshotImageFormatFromMimeType: ()=>external_image_format_js_namespaceObject.screenshotImageFormatFromMimeType,
+    isValidWebPImageBuffer: ()=>external_info_js_namespaceObject.isValidWebPImageBuffer,
+    isScreenshotImageMimeType: ()=>external_image_format_js_namespaceObject.isScreenshotImageMimeType,
+    parseBase64: ()=>external_transform_js_namespaceObject.parseBase64,
+    resizeAndConvertImgBuffer: ()=>external_transform_js_namespaceObject.resizeAndConvertImgBuffer,
+    normalizeScreenshotBase64: ()=>external_transform_js_namespaceObject.normalizeScreenshotBase64,
+    annotateRects: ()=>external_box_select_js_namespaceObject.annotateRects,
+    isValidPNGImageBuffer: ()=>external_info_js_namespaceObject.isValidPNGImageBuffer,
+    screenshotImageFormatFromExtension: ()=>external_image_format_js_namespaceObject.screenshotImageFormatFromExtension,
+    compositePointMarkerImg: ()=>external_box_select_js_namespaceObject.compositePointMarkerImg,
+    isValidJPEGImageBuffer: ()=>external_info_js_namespaceObject.isValidJPEGImageBuffer,
+    screenshotImageExtension: ()=>external_image_format_js_namespaceObject.screenshotImageExtension,
+    screenshotImageMimeType: ()=>external_image_format_js_namespaceObject.screenshotImageMimeType,
+    inferScreenshotImageFormatFromBase64: ()=>external_image_format_js_namespaceObject.inferScreenshotImageFormatFromBase64
 });
 const external_info_js_namespaceObject = require("./info.js");
+const external_image_format_js_namespaceObject = require("./image-format.js");
 const external_transform_js_namespaceObject = require("./transform.js");
 const external_box_select_js_namespaceObject = require("./box-select.js");
 exports.annotateRects = __webpack_exports__.annotateRects;
@@ -59,12 +68,16 @@ exports.compositePointMarkerImg = __webpack_exports__.compositePointMarkerImg;
 exports.convertImgBufferToJpeg = __webpack_exports__.convertImgBufferToJpeg;
 exports.createImgBase64ByFormat = __webpack_exports__.createImgBase64ByFormat;
 exports.cropByRect = __webpack_exports__.cropByRect;
+exports.detectScreenshotImageFormatFromBuffer = __webpack_exports__.detectScreenshotImageFormatFromBuffer;
 exports.httpImg2Base64 = __webpack_exports__.httpImg2Base64;
 exports.imageInfoOfBase64 = __webpack_exports__.imageInfoOfBase64;
 exports.inferBase64ImageFormat = __webpack_exports__.inferBase64ImageFormat;
+exports.inferScreenshotImageFormatFromBase64 = __webpack_exports__.inferScreenshotImageFormatFromBase64;
+exports.isScreenshotImageMimeType = __webpack_exports__.isScreenshotImageMimeType;
 exports.isValidImageBuffer = __webpack_exports__.isValidImageBuffer;
 exports.isValidJPEGImageBuffer = __webpack_exports__.isValidJPEGImageBuffer;
 exports.isValidPNGImageBuffer = __webpack_exports__.isValidPNGImageBuffer;
+exports.isValidWebPImageBuffer = __webpack_exports__.isValidWebPImageBuffer;
 exports.localImg2Base64 = __webpack_exports__.localImg2Base64;
 exports.normalizeBase64Image = __webpack_exports__.normalizeBase64Image;
 exports.normalizeScreenshotBase64 = __webpack_exports__.normalizeScreenshotBase64;
@@ -76,6 +89,10 @@ exports.resizeAndConvertImgBuffer = __webpack_exports__.resizeAndConvertImgBuffe
 exports.resizeImgBase64 = __webpack_exports__.resizeImgBase64;
 exports.saveBase64Image = __webpack_exports__.saveBase64Image;
 exports.scaleImage = __webpack_exports__.scaleImage;
+exports.screenshotImageExtension = __webpack_exports__.screenshotImageExtension;
+exports.screenshotImageFormatFromExtension = __webpack_exports__.screenshotImageFormatFromExtension;
+exports.screenshotImageFormatFromMimeType = __webpack_exports__.screenshotImageFormatFromMimeType;
+exports.screenshotImageMimeType = __webpack_exports__.screenshotImageMimeType;
 exports.validateScreenshotBuffer = __webpack_exports__.validateScreenshotBuffer;
 exports.zoomForGPT4o = __webpack_exports__.zoomForGPT4o;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
@@ -85,12 +102,16 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "convertImgBufferToJpeg",
     "createImgBase64ByFormat",
     "cropByRect",
+    "detectScreenshotImageFormatFromBuffer",
     "httpImg2Base64",
     "imageInfoOfBase64",
     "inferBase64ImageFormat",
+    "inferScreenshotImageFormatFromBase64",
+    "isScreenshotImageMimeType",
     "isValidImageBuffer",
     "isValidJPEGImageBuffer",
     "isValidPNGImageBuffer",
+    "isValidWebPImageBuffer",
     "localImg2Base64",
     "normalizeBase64Image",
     "normalizeScreenshotBase64",
@@ -102,6 +123,10 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "resizeImgBase64",
     "saveBase64Image",
     "scaleImage",
+    "screenshotImageExtension",
+    "screenshotImageFormatFromExtension",
+    "screenshotImageFormatFromMimeType",
+    "screenshotImageMimeType",
     "validateScreenshotBuffer",
     "zoomForGPT4o"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/lib/img/info.js

@@ -36,6 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
     isValidPNGImageBuffer: ()=>isValidPNGImageBuffer,
     isValidImageBuffer: ()=>isValidImageBuffer,
     validateScreenshotBuffer: ()=>validateScreenshotBuffer,
+    isValidWebPImageBuffer: ()=>isValidWebPImageBuffer,
     imageInfoOfBase64: ()=>imageInfoOfBase64,
     isValidJPEGImageBuffer: ()=>isValidJPEGImageBuffer
 });
@@ -47,6 +48,7 @@ const external_get_photon_js_namespaceObject = require("./get-photon.js");
 var external_get_photon_js_default = /*#__PURE__*/ __webpack_require__.n(external_get_photon_js_namespaceObject);
 const external_get_sharp_js_namespaceObject = require("./get-sharp.js");
 var external_get_sharp_js_default = /*#__PURE__*/ __webpack_require__.n(external_get_sharp_js_namespaceObject);
+const external_image_format_js_namespaceObject = require("./image-format.js");
 async function imageInfoOfBase64(imageBase64) {
     const base64Data = imageBase64.replace(/^data:image\/\w+;base64,/, '').replace(/\s/g, '');
     external_node_assert_default()(base64Data, 'Invalid image: empty base64 data');
@@ -112,8 +114,11 @@ function isValidJPEGImageBuffer(buffer) {
     if (!buffer || buffer.length < 3) return false;
     return 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2];
 }
+function isValidWebPImageBuffer(buffer) {
+    return 'webp' === (0, external_image_format_js_namespaceObject.detectScreenshotImageFormatFromBuffer)(buffer);
+}
 function isValidImageBuffer(buffer) {
-    return isValidPNGImageBuffer(buffer) || isValidJPEGImageBuffer(buffer);
+    return isValidPNGImageBuffer(buffer) || isValidJPEGImageBuffer(buffer) || isValidWebPImageBuffer(buffer);
 }
 function validateScreenshotBuffer(screenshotBuffer, { label, minBufferSize = 0 }) {
     const bufferSize = screenshotBuffer?.length ?? 0;
@@ -125,12 +130,14 @@ exports.imageInfoOfBase64 = __webpack_exports__.imageInfoOfBase64;
 exports.isValidImageBuffer = __webpack_exports__.isValidImageBuffer;
 exports.isValidJPEGImageBuffer = __webpack_exports__.isValidJPEGImageBuffer;
 exports.isValidPNGImageBuffer = __webpack_exports__.isValidPNGImageBuffer;
+exports.isValidWebPImageBuffer = __webpack_exports__.isValidWebPImageBuffer;
 exports.validateScreenshotBuffer = __webpack_exports__.validateScreenshotBuffer;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "imageInfoOfBase64",
     "isValidImageBuffer",
     "isValidJPEGImageBuffer",
     "isValidPNGImageBuffer",
+    "isValidWebPImageBuffer",
     "validateScreenshotBuffer"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/lib/img/transform.js

@@ -67,6 +67,7 @@ const external_get_photon_js_namespaceObject = require("./get-photon.js");
 var external_get_photon_js_default = /*#__PURE__*/ __webpack_require__.n(external_get_photon_js_namespaceObject);
 const external_get_sharp_js_namespaceObject = require("./get-sharp.js");
 var external_get_sharp_js_default = /*#__PURE__*/ __webpack_require__.n(external_get_sharp_js_namespaceObject);
+const external_image_format_js_namespaceObject = require("./image-format.js");
 const imgDebug = (0, external_logger_js_namespaceObject.getDebug)('img');
 async function saveBase64Image(options) {
     const { base64Data, outputPath } = options;
@@ -146,17 +147,13 @@ async function convertImgBufferToJpeg(inputData, quality = 90) {
     }
 }
 const base64ImageDataUrlPattern = /^data:image\/[a-zA-Z0-9.+-]+;base64,/i;
-const supportedScreenshotDataUriPattern = /^data:image\/(png|jpe?g);base64,([\s\S]*)$/i;
+const supportedScreenshotDataUriPattern = /^data:image\/(png|jpe?g|webp);base64,([\s\S]*)$/i;
 const rawBase64BodyPattern = /^[A-Za-z0-9+/=\s]+$/;
-const inferBase64ImageFormat = (base64Body)=>{
-    if (base64Body.startsWith('iVBORw0KGgo')) return 'png';
-    return 'jpeg';
-};
+const inferBase64ImageFormat = (base64Body)=>(0, external_image_format_js_namespaceObject.inferScreenshotImageFormatFromBase64)(base64Body) ?? 'jpeg';
 function detectImageMimeTypeFromBuffer(buffer) {
-    if (buffer.length >= 8 && 0x89 === buffer[0] && 0x50 === buffer[1] && 0x4e === buffer[2] && 0x47 === buffer[3] && 0x0d === buffer[4] && 0x0a === buffer[5] && 0x1a === buffer[6] && 0x0a === buffer[7]) return 'image/png';
-    if (buffer.length >= 3 && 0xff === buffer[0] && 0xd8 === buffer[1] && 0xff === buffer[2]) return 'image/jpeg';
+    const screenshotFormat = (0, external_image_format_js_namespaceObject.detectScreenshotImageFormatFromBuffer)(buffer);
+    if (screenshotFormat) return (0, external_image_format_js_namespaceObject.screenshotImageMimeType)(screenshotFormat);
     if (buffer.length >= 6 && 'GIF' === buffer.subarray(0, 3).toString('ascii')) return 'image/gif';
-    if (buffer.length >= 12 && 'RIFF' === buffer.subarray(0, 4).toString('ascii') && 'WEBP' === buffer.subarray(8, 12).toString('ascii')) return 'image/webp';
     if (buffer.length >= 2 && 0x42 === buffer[0] && 0x4d === buffer[1]) return 'image/bmp';
 }
 const createImgBase64ByFormat = (format, body)=>`data:image/${format};base64,${normalizeBase64Body(body)}`;
@@ -171,9 +168,11 @@ const normalizeScreenshotBase64 = (base64, options)=>{
         if (!normalizeBase64Body(body)) throw new Error(`${label} cannot be empty`);
         return createImgBase64ByFormat(imageFormat, body);
     }
-    if (trimmedBase64.startsWith('data:')) throw new Error(`${label} must be a PNG/JPEG data URI or raw PNG base64 string`);
-    if (!rawBase64BodyPattern.test(trimmedBase64)) throw new Error(`${label} must be a PNG/JPEG data URI or raw PNG base64 string`);
-    return createImgBase64ByFormat('png', trimmedBase64);
+    if (trimmedBase64.startsWith('data:')) throw new Error(`${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`);
+    if (!rawBase64BodyPattern.test(trimmedBase64)) throw new Error(`${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`);
+    const base64Body = normalizeBase64Body(trimmedBase64);
+    const inferredFormat = (0, external_image_format_js_namespaceObject.inferScreenshotImageFormatFromBase64)(base64Body);
+    return createImgBase64ByFormat('webp' === inferredFormat ? 'webp' : 'png', base64Body);
 };
 const normalizeBase64Image = (base64)=>{
     const trimmedBase64 = base64.trim();

package/dist/types/agent-tools/types.d.ts

@@ -95,7 +95,7 @@ export type UserPromptLike = string | {
 };
 export interface RecordToReportScreenshot {
     /**
-     * PNG/JPEG data URI, or raw PNG base64 body.
+     * PNG/JPEG/WebP data URI, or raw PNG/WebP base64 body.
      */
     base64: string;
     description?: string;

package/dist/types/img/image-format.d.ts

@@ -0,0 +1,9 @@
+export type ScreenshotImageFormat = 'png' | 'jpeg' | 'webp';
+export type ScreenshotImageMimeType = 'image/png' | 'image/jpeg' | 'image/webp';
+export declare function screenshotImageMimeType(format: ScreenshotImageFormat): ScreenshotImageMimeType;
+export declare function screenshotImageExtension(format: ScreenshotImageFormat): ScreenshotImageFormat;
+export declare function screenshotImageFormatFromExtension(extension: unknown): ScreenshotImageFormat | undefined;
+export declare function screenshotImageFormatFromMimeType(mimeType: unknown): ScreenshotImageFormat | undefined;
+export declare function isScreenshotImageMimeType(mimeType: unknown): mimeType is ScreenshotImageMimeType;
+export declare function inferScreenshotImageFormatFromBase64(base64Body: string): ScreenshotImageFormat | undefined;
+export declare function detectScreenshotImageFormatFromBuffer(buffer: Uint8Array): ScreenshotImageFormat | undefined;

package/dist/types/img/index.d.ts

@@ -1,3 +1,4 @@
-export { imageInfoOfBase64, isValidPNGImageBuffer, isValidJPEGImageBuffer, isValidImageBuffer, validateScreenshotBuffer, type ValidateScreenshotBufferOptions, } from './info';
+export { imageInfoOfBase64, isValidPNGImageBuffer, isValidJPEGImageBuffer, isValidWebPImageBuffer, isValidImageBuffer, validateScreenshotBuffer, type ValidateScreenshotBufferOptions, } from './info';
+export { detectScreenshotImageFormatFromBuffer, inferScreenshotImageFormatFromBase64, isScreenshotImageMimeType, screenshotImageExtension, screenshotImageFormatFromExtension, screenshotImageFormatFromMimeType, screenshotImageMimeType, type ScreenshotImageFormat, type ScreenshotImageMimeType, } from './image-format';
 export { resizeAndConvertImgBuffer, convertImgBufferToJpeg, resizeImgBase64, zoomForGPT4o, saveBase64Image, paddingToMatchBlockByBase64, cropByRect, scaleImage, localImg2Base64, httpImg2Base64, preProcessImageUrl, parseBase64, createImgBase64ByFormat, inferBase64ImageFormat, normalizeBase64Image, normalizeScreenshotBase64, type NormalizeScreenshotBase64Options, } from './transform';
 export { processImageElementInfo, compositeElementInfoImg, compositePointMarkerImg, annotateRects, } from './box-select';

package/dist/types/img/info.d.ts

@@ -23,9 +23,15 @@ export declare function isValidPNGImageBuffer(buffer: Buffer): boolean;
  */
 export declare function isValidJPEGImageBuffer(buffer: Buffer): boolean;
 /**
- * Check if the Buffer is a valid image (PNG or JPEG)
+ * Check if the Buffer has a WebP signature.
  * @param buffer The Buffer to check
- * @returns true if the Buffer is a valid PNG or JPEG image, otherwise false
+ * @returns true if the Buffer has a WebP signature, otherwise false
+ */
+export declare function isValidWebPImageBuffer(buffer: Buffer): boolean;
+/**
+ * Check if the Buffer is a supported screenshot image (PNG, JPEG, or WebP)
+ * @param buffer The Buffer to check
+ * @returns true if the Buffer has a supported image signature, otherwise false
  */
 export declare function isValidImageBuffer(buffer: Buffer): boolean;
 export interface ValidateScreenshotBufferOptions {

package/dist/types/img/transform.d.ts

@@ -1,6 +1,7 @@
 import { Buffer } from 'node:buffer';
 import type { PhotonImage as PhotonImageType } from '@silvia-odwyer/photon';
 import type { Rect } from '../types';
+import { type ScreenshotImageFormat } from './image-format';
 /**
  * Saves a Base64-encoded image to a file
  *
@@ -29,7 +30,7 @@ export declare function resizeAndConvertImgBuffer(inputFormat: string, inputData
 export declare const normalizeBase64Body: (body: string) => string;
 /** Convert an image buffer to JPEG without changing its dimensions. */
 export declare function convertImgBufferToJpeg(inputData: Buffer, quality?: number): Promise<Buffer>;
-export declare const inferBase64ImageFormat: (base64Body: string) => "jpeg" | "png";
+export declare const inferBase64ImageFormat: (base64Body: string) => ScreenshotImageFormat;
 export declare const createImgBase64ByFormat: (format: string, body: string) => string;
 export interface NormalizeScreenshotBase64Options {
     label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/shared",
-  "version": "1.10.6",
+  "version": "1.10.7-beta-20260720030503.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",

package/src/agent-tools/types.ts

@@ -98,7 +98,7 @@ export type UserPromptLike =
 
 export interface RecordToReportScreenshot {
   /**
-   * PNG/JPEG data URI, or raw PNG base64 body.
+   * PNG/JPEG/WebP data URI, or raw PNG/WebP base64 body.
    */
   base64: string;
   description?: string;

package/src/cli/screenshot-file.ts

@@ -1,6 +1,11 @@
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join } from 'node:path';
+import {
+  type ScreenshotImageFormat,
+  screenshotImageFormatFromExtension,
+  screenshotImageFormatFromMimeType,
+} from '../img/image-format';
 
 export interface WriteCliScreenshotFileOptions {
   id?: unknown;
@@ -20,14 +25,12 @@ function safeScreenshotFilenamePart(value: unknown): string {
 function extensionFromImageMetadata(
   mimeType: unknown,
   extension: unknown,
-): 'png' | 'jpeg' {
-  if (extension === 'jpeg' || extension === 'jpg') {
-    return 'jpeg';
+): ScreenshotImageFormat {
+  const extensionFormat = screenshotImageFormatFromExtension(extension);
+  if (extensionFormat) {
+    return extensionFormat;
   }
-  if (extension === 'png') {
-    return 'png';
-  }
-  return mimeType === 'image/jpeg' ? 'jpeg' : 'png';
+  return screenshotImageFormatFromMimeType(mimeType) ?? 'png';
 }
 
 export function writeCliScreenshotFile(

package/src/cli/verbose-screenshot.ts

@@ -71,7 +71,9 @@ function screenshotRawBase64(value: unknown): string | undefined {
   }
 
   const base64 = getStringProperty(value, 'base64');
-  const match = base64?.match(/^data:image\/(?:png|jpeg|jpg);base64,(.+)$/);
+  const match = base64?.match(
+    /^data:image\/(?:png|jpeg|jpg|webp);base64,(.+)$/,
+  );
   return match?.[1];
 }
 

package/src/img/canvas-fallback.ts

@@ -4,6 +4,11 @@
  */
 
 import { getDebug } from '../logger';
+import {
+  detectScreenshotImageFormatFromBuffer,
+  inferScreenshotImageFormatFromBase64,
+  screenshotImageMimeType,
+} from './image-format';
 
 const debug = getDebug('img:canvas-fallback');
 
@@ -89,7 +94,9 @@ export class CanvasImage {
       if (base64Body.startsWith('data:')) {
         img.src = base64Body;
       } else {
-        img.src = `data:image/png;base64,${base64Body}`;
+        const format =
+          inferScreenshotImageFormatFromBase64(base64Body) ?? 'png';
+        img.src = `data:${screenshotImageMimeType(format)};base64,${base64Body}`;
       }
     });
   }
@@ -99,7 +106,10 @@ export class CanvasImage {
    */
   static async new_from_byteslice(bytes: Uint8Array): Promise<CanvasImage> {
     return new Promise((resolve, reject) => {
-      const blob = new Blob([bytes], { type: 'image/png' });
+      const format = detectScreenshotImageFormatFromBuffer(bytes) ?? 'png';
+      const blob = new Blob([bytes], {
+        type: screenshotImageMimeType(format),
+      });
       const url = URL.createObjectURL(blob);
       const img = new Image();
 

package/src/img/image-format.ts

@@ -0,0 +1,131 @@
+export type ScreenshotImageFormat = 'png' | 'jpeg' | 'webp';
+
+export type ScreenshotImageMimeType = 'image/png' | 'image/jpeg' | 'image/webp';
+
+const mimeTypeByFormat: Record<ScreenshotImageFormat, ScreenshotImageMimeType> =
+  {
+    png: 'image/png',
+    jpeg: 'image/jpeg',
+    webp: 'image/webp',
+  };
+
+export function screenshotImageMimeType(
+  format: ScreenshotImageFormat,
+): ScreenshotImageMimeType {
+  return mimeTypeByFormat[format];
+}
+
+export function screenshotImageExtension(
+  format: ScreenshotImageFormat,
+): ScreenshotImageFormat {
+  return format;
+}
+
+export function screenshotImageFormatFromExtension(
+  extension: unknown,
+): ScreenshotImageFormat | undefined {
+  if (typeof extension !== 'string') {
+    return undefined;
+  }
+
+  switch (extension.toLowerCase()) {
+    case 'png':
+      return 'png';
+    case 'jpeg':
+    case 'jpg':
+      return 'jpeg';
+    case 'webp':
+      return 'webp';
+    default:
+      return undefined;
+  }
+}
+
+export function screenshotImageFormatFromMimeType(
+  mimeType: unknown,
+): ScreenshotImageFormat | undefined {
+  if (typeof mimeType !== 'string') {
+    return undefined;
+  }
+
+  switch (mimeType.toLowerCase()) {
+    case 'image/png':
+      return 'png';
+    case 'image/jpeg':
+    case 'image/jpg':
+      return 'jpeg';
+    case 'image/webp':
+      return 'webp';
+    default:
+      return undefined;
+  }
+}
+
+export function isScreenshotImageMimeType(
+  mimeType: unknown,
+): mimeType is ScreenshotImageMimeType {
+  return (
+    mimeType === 'image/png' ||
+    mimeType === 'image/jpeg' ||
+    mimeType === 'image/webp'
+  );
+}
+
+export function inferScreenshotImageFormatFromBase64(
+  base64Body: string,
+): ScreenshotImageFormat | undefined {
+  const normalizedBody = base64Body.replace(/\s/g, '');
+  if (normalizedBody.startsWith('iVBORw0KGgo')) {
+    return 'png';
+  }
+  if (normalizedBody.startsWith('/9j/')) {
+    return 'jpeg';
+  }
+  if (normalizedBody.startsWith('UklGR')) {
+    return 'webp';
+  }
+  return undefined;
+}
+
+export function detectScreenshotImageFormatFromBuffer(
+  buffer: Uint8Array,
+): ScreenshotImageFormat | undefined {
+  if (
+    buffer.length >= 8 &&
+    buffer[0] === 0x89 &&
+    buffer[1] === 0x50 &&
+    buffer[2] === 0x4e &&
+    buffer[3] === 0x47 &&
+    buffer[4] === 0x0d &&
+    buffer[5] === 0x0a &&
+    buffer[6] === 0x1a &&
+    buffer[7] === 0x0a
+  ) {
+    return 'png';
+  }
+
+  if (
+    buffer.length >= 3 &&
+    buffer[0] === 0xff &&
+    buffer[1] === 0xd8 &&
+    buffer[2] === 0xff
+  ) {
+    return 'jpeg';
+  }
+
+  if (
+    buffer.length >= 12 &&
+    buffer[0] === 0x52 &&
+    buffer[1] === 0x49 &&
+    buffer[2] === 0x46 &&
+    buffer[3] === 0x46 &&
+    buffer[8] === 0x57 &&
+    buffer[9] === 0x45 &&
+    buffer[10] === 0x42 &&
+    buffer[11] === 0x50
+  ) {
+    return 'webp';
+  }
+
+  return undefined;
+}

package/src/img/index.ts

@@ -2,10 +2,22 @@ export {
   imageInfoOfBase64,
   isValidPNGImageBuffer,
   isValidJPEGImageBuffer,
+  isValidWebPImageBuffer,
   isValidImageBuffer,
   validateScreenshotBuffer,
   type ValidateScreenshotBufferOptions,
 } from './info';
+export {
+  detectScreenshotImageFormatFromBuffer,
+  inferScreenshotImageFormatFromBase64,
+  isScreenshotImageMimeType,
+  screenshotImageExtension,
+  screenshotImageFormatFromExtension,
+  screenshotImageFormatFromMimeType,
+  screenshotImageMimeType,
+  type ScreenshotImageFormat,
+  type ScreenshotImageMimeType,
+} from './image-format';
 export {
   resizeAndConvertImgBuffer,
   convertImgBufferToJpeg,

package/src/img/info.ts

@@ -4,6 +4,7 @@ import type { Size } from '../types';
 import { ifInNode } from '../utils';
 import getPhoton from './get-photon';
 import getSharp from './get-sharp';
+import { detectScreenshotImageFormatFromBuffer } from './image-format';
 
 export interface ImageInfo extends Size {}
 
@@ -118,12 +119,25 @@ export function isValidJPEGImageBuffer(buffer: Buffer): boolean {
 }
 
 /**
- * Check if the Buffer is a valid image (PNG or JPEG)
+ * Check if the Buffer has a WebP signature.
  * @param buffer The Buffer to check
- * @returns true if the Buffer is a valid PNG or JPEG image, otherwise false
+ * @returns true if the Buffer has a WebP signature, otherwise false
+ */
+export function isValidWebPImageBuffer(buffer: Buffer): boolean {
+  return detectScreenshotImageFormatFromBuffer(buffer) === 'webp';
+}
+
+/**
+ * Check if the Buffer is a supported screenshot image (PNG, JPEG, or WebP)
+ * @param buffer The Buffer to check
+ * @returns true if the Buffer has a supported image signature, otherwise false
  */
 export function isValidImageBuffer(buffer: Buffer): boolean {
-  return isValidPNGImageBuffer(buffer) || isValidJPEGImageBuffer(buffer);
+  return (
+    isValidPNGImageBuffer(buffer) ||
+    isValidJPEGImageBuffer(buffer) ||
+    isValidWebPImageBuffer(buffer)
+  );
 }
 
 export interface ValidateScreenshotBufferOptions {

package/src/img/transform.ts

@@ -9,6 +9,12 @@ import type { Rect } from '../types';
 import { ifInNode } from '../utils';
 import getPhoton from './get-photon';
 import getSharp from './get-sharp';
+import {
+  type ScreenshotImageFormat,
+  detectScreenshotImageFormatFromBuffer,
+  inferScreenshotImageFormatFromBase64,
+  screenshotImageMimeType,
+} from './image-format';
 
 const imgDebug = getDebug('img');
 
@@ -175,48 +181,22 @@ export async function convertImgBufferToJpeg(
 
 const base64ImageDataUrlPattern = /^data:image\/[a-zA-Z0-9.+-]+;base64,/i;
 const supportedScreenshotDataUriPattern =
-  /^data:image\/(png|jpe?g);base64,([\s\S]*)$/i;
+  /^data:image\/(png|jpe?g|webp);base64,([\s\S]*)$/i;
 const rawBase64BodyPattern = /^[A-Za-z0-9+/=\s]+$/;
 
-export const inferBase64ImageFormat = (base64Body: string) => {
-  if (base64Body.startsWith('iVBORw0KGgo')) {
-    return 'png';
-  }
-  return 'jpeg';
-};
+export const inferBase64ImageFormat = (
+  base64Body: string,
+): ScreenshotImageFormat =>
+  inferScreenshotImageFormatFromBase64(base64Body) ?? 'jpeg';
 
 function detectImageMimeTypeFromBuffer(buffer: Buffer): string | undefined {
-  if (
-    buffer.length >= 8 &&
-    buffer[0] === 0x89 &&
-    buffer[1] === 0x50 &&
-    buffer[2] === 0x4e &&
-    buffer[3] === 0x47 &&
-    buffer[4] === 0x0d &&
-    buffer[5] === 0x0a &&
-    buffer[6] === 0x1a &&
-    buffer[7] === 0x0a
-  ) {
-    return 'image/png';
-  }
-  if (
-    buffer.length >= 3 &&
-    buffer[0] === 0xff &&
-    buffer[1] === 0xd8 &&
-    buffer[2] === 0xff
-  ) {
-    return 'image/jpeg';
+  const screenshotFormat = detectScreenshotImageFormatFromBuffer(buffer);
+  if (screenshotFormat) {
+    return screenshotImageMimeType(screenshotFormat);
   }
   if (buffer.length >= 6 && buffer.subarray(0, 3).toString('ascii') === 'GIF') {
     return 'image/gif';
   }
-  if (
-    buffer.length >= 12 &&
-    buffer.subarray(0, 4).toString('ascii') === 'RIFF' &&
-    buffer.subarray(8, 12).toString('ascii') === 'WEBP'
-  ) {
-    return 'image/webp';
-  }
   if (buffer.length >= 2 && buffer[0] === 0x42 && buffer[1] === 0x4d) {
     return 'image/bmp';
   }
@@ -243,10 +223,10 @@ export const normalizeScreenshotBase64 = (
 
   const dataUriMatch = trimmedBase64.match(supportedScreenshotDataUriPattern);
   if (dataUriMatch) {
-    const imageFormat =
+    const imageFormat: ScreenshotImageFormat =
       dataUriMatch[1].toLowerCase() === 'jpg'
         ? 'jpeg'
-        : dataUriMatch[1].toLowerCase();
+        : (dataUriMatch[1].toLowerCase() as ScreenshotImageFormat);
     const body = dataUriMatch[2];
     if (!normalizeBase64Body(body)) {
       throw new Error(`${label} cannot be empty`);
@@ -256,17 +236,22 @@ export const normalizeScreenshotBase64 = (
 
   if (trimmedBase64.startsWith('data:')) {
     throw new Error(
-      `${label} must be a PNG/JPEG data URI or raw PNG base64 string`,
+      `${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`,
     );
   }
 
   if (!rawBase64BodyPattern.test(trimmedBase64)) {
     throw new Error(
-      `${label} must be a PNG/JPEG data URI or raw PNG base64 string`,
+      `${label} must be a PNG/JPEG/WebP data URI or raw PNG/WebP base64 string`,
     );
   }
 
-  return createImgBase64ByFormat('png', trimmedBase64);
+  const base64Body = normalizeBase64Body(trimmedBase64);
+  const inferredFormat = inferScreenshotImageFormatFromBase64(base64Body);
+  return createImgBase64ByFormat(
+    inferredFormat === 'webp' ? 'webp' : 'png',
+    base64Body,
+  );
 };
 
 export const normalizeBase64Image = (base64: string) => {