@wdio/image-comparison-core 1.0.0

package/dist/methods/images.interfaces.d.ts

@@ -0,0 +1,214 @@
+import type { RectanglesOutput } from './rectangles.interfaces.js';
+import type { BaseCoordinates, BaseDeviceInfo, BaseDimensions, BaseImageCompareOptions, BaseMobileBlockOutOptions, Folders } from '../base.interfaces.js';
+import type { TestContext } from './compareReport.interfaces.js';
+import type { DeviceRectangles } from './rectangles.interfaces.js';
+import type { WicElement } from 'src/index.js';
+export interface ResizeDimensions {
+    /** The bottom margin */
+    bottom?: number;
+    /** The left margin */
+    left?: number;
+    /** The right margin */
+    right?: number;
+    /** The top margin */
+    top?: number;
+}
+export interface ExecuteImageCompare {
+    /** The options for image comparison */
+    options: ImageCompareOptions;
+    /** The test context */
+    testContext: TestContext;
+    /** Whether this is a viewport screenshot */
+    isViewPortScreenshot: boolean;
+    /** Whether this is a native context */
+    isNativeContext: boolean;
+}
+export interface ImageCompareOptions {
+    /** Optional ignore regions */
+    ignoreRegions?: RectanglesOutput[];
+    /** The device pixel ratio of the device */
+    devicePixelRatio: number;
+    /** The compare options */
+    compareOptions: {
+        wic: WicImageCompareOptions;
+        method: ScreenMethodImageCompareCompareOptions;
+    };
+    /** The device rectangles */
+    deviceRectangles: DeviceRectangles;
+    /** The name of the file */
+    fileName: string;
+    /** The folders object */
+    folderOptions: ImageCompareFolderOptions;
+    /** Is this an Android device */
+    isAndroid: boolean;
+    /** If this is a native web screenshot */
+    isAndroidNativeWebScreenshot: boolean;
+}
+export interface WicImageCompareOptions extends BaseImageCompareOptions, BaseMobileBlockOutOptions {
+    /** Create a json file with the diff data, this can be used to create a custom report. */
+    createJsonReportFiles: boolean;
+    /** The proximity of the diff pixels to determine if a diff pixel is part of a group,
+     * the higher the number the more pixels will be grouped, the lower the number the less pixels will be grouped due to accuracy.
+     * Default is 5 pixels */
+    diffPixelBoundingBoxProximity: number;
+}
+export interface DefaultImageCompareCompareOptions extends MethodImageCompareCompareOptions {
+    /** Block out array with x, y, width and height values */
+    blockOut?: RectanglesOutput[];
+}
+export interface ScreenMethodImageCompareCompareOptions extends DefaultImageCompareCompareOptions, MethodImageCompareCompareOptions {
+    /** Block out the side bar yes or no */
+    blockOutSideBar?: boolean;
+    /** Block out the status bar yes or no */
+    blockOutStatusBar?: boolean;
+    /** Block out the tool bar yes or no */
+    blockOutToolBar?: boolean;
+}
+export interface MethodImageCompareCompareOptions extends BaseImageCompareOptions {
+    /** Block out array with x, y, width and height values */
+    blockOut?: RectanglesOutput[];
+    /** Default false. If true, return percentage will be like 0.12345678, default is 0.12 */
+    rawMisMatchPercentage?: boolean;
+}
+export interface ImageCompareFolderOptions extends Folders {
+    /** Auto save image to baseline */
+    autoSaveBaseline: boolean;
+    /** The name of the browser */
+    browserName: string;
+    /** The name of the device */
+    deviceName: string;
+    /** Is the instance a mobile instance */
+    isMobile: boolean;
+    /** If the folder needs to have the instance name in it */
+    savePerInstance: boolean;
+}
+export interface ImageCompareResult {
+    /** The file name */
+    fileName: string;
+    folders: {
+        /** The actual folder and file name */
+        actual: string;
+        /** The baseline folder and file name */
+        baseline: string;
+        /** This following folder is optional and only if there is a mismatch
+         * The folder that holds the diffs and the file name */
+        diff?: string;
+    };
+    /** The mismatch percentage */
+    misMatchPercentage: number;
+}
+export interface Pixel extends BaseCoordinates {
+}
+export interface CroppedBase64Image extends Partial<BaseDeviceInfo> {
+    /** Whether to add iOS bezel corners */
+    addIOSBezelCorners: boolean;
+    /** The base64 image */
+    base64Image: string;
+    /** Whether this is a webdriver element screenshot */
+    isWebDriverElementScreenshot?: boolean;
+    /** Whether the image is in landscape mode */
+    isLandscape: boolean;
+    /** The rectangles */
+    rectangles: RectanglesOutput;
+    /** The resize dimensions */
+    resizeDimensions?: ResizeDimensions;
+}
+export interface RotateBase64ImageOptions {
+    /** The base64 image */
+    base64Image: string;
+    /** The degrees to rotate */
+    degrees: number;
+}
+export interface CropAndConvertToDataURL extends BaseDimensions {
+    /** Whether to add iOS bezel corners */
+    addIOSBezelCorners: boolean;
+    /** The base64 image */
+    base64Image: string;
+    /** The name of the device */
+    deviceName: string;
+    /** The device pixel ratio */
+    devicePixelRatio: number;
+    /** Whether this is an iOS device */
+    isIOS: boolean;
+    /** Whether the image is in landscape mode */
+    isLandscape: boolean;
+    /** The source x coordinate */
+    sourceX: number;
+    /** The source y coordinate */
+    sourceY: number;
+}
+export interface AdjustedAxis {
+    /** The length of the axis */
+    length: number;
+    /** The maximum dimension */
+    maxDimension: number;
+    /** The padding at the end */
+    paddingEnd: number;
+    /** The padding at the start */
+    paddingStart: number;
+    /** The start coordinate */
+    start: number;
+    /** The warning type */
+    warningType: 'WIDTH' | 'HEIGHT';
+}
+export interface DimensionsWarning {
+    /** The dimension */
+    dimension: number;
+    /** The maximum dimension */
+    maxDimension: number;
+    /** The position */
+    position: number;
+    /** The type of warning */
+    type: string;
+}
+export interface CheckBaselineImageExists {
+    /** The actual file path */
+    actualFilePath: string;
+    /** The baseline file path */
+    baselineFilePath: string;
+    /** Whether to auto save baseline */
+    autoSaveBaseline?: boolean;
+    /** Whether to update baseline */
+    updateBaseline?: boolean;
+}
+export interface RotatedImage {
+    /** Whether this is a webdriver element screenshot */
+    isWebDriverElementScreenshot: boolean;
+    /** Whether the image is in landscape mode */
+    isLandscape: boolean;
+    /** The base64 image */
+    base64Image: string;
+}
+export interface HandleIOSBezelCorners extends BaseDimensions {
+    /** Whether to add iOS bezel corners */
+    addIOSBezelCorners: boolean;
+    /** The name of the device */
+    deviceName: string;
+    /** The device pixel ratio */
+    devicePixelRatio: number;
+    /** The image */
+    image: any;
+    /** Whether the image is in landscape mode */
+    isLandscape: boolean;
+}
+export interface MakeFullPageBase64ImageOptions {
+    /** The device pixel ratio */
+    devicePixelRatio: number;
+    /** Whether the image is in landscape mode */
+    isLandscape: boolean;
+}
+export interface TakeResizedBase64ScreenshotOptions {
+    /** The browser instance */
+    browserInstance: WebdriverIO.Browser;
+    /** The element to take the screenshot of */
+    element: WicElement;
+    /** The device pixel ratio */
+    devicePixelRatio: number;
+    /** Whether the image is in landscape mode */
+    isIOS: boolean;
+    /** The resize dimensions */
+    resizeDimensions: ResizeDimensions;
+}
+export interface TakeBase64ElementScreenshotOptions extends TakeResizedBase64ScreenshotOptions {
+}
+//# sourceMappingURL=images.interfaces.d.ts.map

package/dist/methods/images.interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.interfaces.d.ts","sourceRoot":"","sources":["../../src/methods/images.interfaces.ts"],"names":[],"mappings":"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"}

package/dist/methods/images.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/methods/images.js

@@ -0,0 +1,428 @@
+import { fileURLToPath } from 'node:url';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { promises as fsPromises, constants } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { Jimp, JimpMime } from 'jimp';
+import logger from '@wdio/logger';
+import compareImages from '../resemble/compareImages.js';
+import { calculateDprData, getIosBezelImageNames, getBase64ScreenshotSize, prepareComparisonFilePaths, updateVisualBaseline } from '../helpers/utils.js';
+import { prepareIgnoreOptions } from '../helpers/options.js';
+import { DEFAULT_RESIZE_DIMENSIONS, supportedIosBezelDevices } from '../helpers/constants.js';
+import { isWdioElement, prepareIgnoreRectangles } from './rectangles.js';
+import { generateAndSaveDiff } from './processDiffPixels.js';
+import { createJsonReportIfNeeded } from './createCompareReport.js';
+import { takeBase64Screenshot } from './screenshots.js';
+const log = logger('@wdio/visual-service:@wdio/image-comparison-core:images');
+/**
+ * Check if an image exists and return a boolean
+ */
+export async function checkIfImageExists(filePath) {
+    try {
+        await fsPromises.access(filePath, constants.R_OK);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Remove the diff image if it exists
+ */
+export async function removeDiffImageIfExists(diffFilePath) {
+    if (await checkIfImageExists(diffFilePath)) {
+        try {
+            await fsPromises.unlink(diffFilePath);
+            log.info(`Successfully removed the diff image before comparing at ${diffFilePath}`);
+        }
+        catch (error) {
+            throw new Error(`Could not remove the diff image. The following error was thrown: ${error}`);
+        }
+    }
+}
+/**
+ * Check if the image exists and create a new baseline image if needed
+ */
+export async function checkBaselineImageExists({ actualFilePath, baselineFilePath, autoSaveBaseline = false, updateBaseline = false }) {
+    try {
+        if (updateBaseline || !(await checkIfImageExists(baselineFilePath))) {
+            throw new Error();
+        }
+    }
+    catch {
+        if (autoSaveBaseline || updateBaseline) {
+            try {
+                const autoSaveMessage = 'Autosaved the';
+                const updateBaselineMessage = 'Updated the actual';
+                const data = readFileSync(actualFilePath);
+                writeFileSync(baselineFilePath, data);
+                log.info('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+ INFO:
+ ${autoSaveBaseline ? autoSaveMessage : updateBaselineMessage} image to
+ ${baselineFilePath}
+#####################################################################################`);
+            }
+            catch (error) {
+                throw new Error(`
+#####################################################################################
+ Image could not be copied. The following error was thrown:
+ ${error}
+#####################################################################################`);
+            }
+        }
+        else {
+            throw new Error(`
+#####################################################################################
+ Baseline image not found, save the actual image manually to the baseline.
+ The image can be found here:
+ ${actualFilePath}
+#####################################################################################`);
+        }
+    }
+}
+/**
+ * Get the rotated image if needed
+ */
+export async function getRotatedImageIfNeeded({ isWebDriverElementScreenshot, isLandscape, base64Image }) {
+    const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(base64Image);
+    const isRotated = !isWebDriverElementScreenshot && isLandscape && screenshotHeight > screenshotWidth;
+    return isRotated ? await rotateBase64Image({ base64Image, degrees: 90 }) : base64Image;
+}
+/**
+ * Log a warning when the crop goes out of the screen
+ */
+export function logDimensionWarning({ dimension, maxDimension, position, type, }) {
+    log.warn('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+ THE RESIZE DIMENSION ${type}=${dimension} MADE THE CROPPING GO OUT OF THE SCREEN SIZE
+ RESULTING IN A ${type} CROP POSITION=${position}.
+ THIS HAS BEEN DEFAULTED TO '${['TOP', 'LEFT'].includes(type) ? 0 : maxDimension}'
+#####################################################################################
+`);
+}
+/**
+ * Get the adjusted axis
+ */
+export function getAdjustedAxis({ length, maxDimension, paddingEnd, paddingStart, start, warningType, }) {
+    let adjustedStart = start - paddingStart;
+    let adjustedEnd = start + length + paddingEnd;
+    if (adjustedStart < 0) {
+        logDimensionWarning({
+            dimension: paddingStart,
+            maxDimension,
+            position: adjustedStart,
+            type: warningType === 'WIDTH' ? 'LEFT' : 'TOP',
+        });
+        adjustedStart = 0;
+    }
+    if (adjustedEnd > maxDimension) {
+        logDimensionWarning({
+            dimension: paddingEnd,
+            maxDimension,
+            position: adjustedEnd,
+            type: warningType === 'WIDTH' ? 'RIGHT' : 'BOTTOM',
+        });
+        adjustedEnd = maxDimension;
+    }
+    return [adjustedStart, adjustedEnd];
+}
+/**
+ * Handle the iOS bezel corners
+ */
+export async function handleIOSBezelCorners({ addIOSBezelCorners, image, deviceName, devicePixelRatio, height, isLandscape, width, }) {
+    const normalizedDeviceName = deviceName.toLowerCase()
+        .replace(/([^A-Za-z0-9]|simulator|inch|(\d(st|nd|rd|th)) generation)/gi, '');
+    const isSupported = (normalizedDeviceName.includes('iphone') && supportedIosBezelDevices.includes(normalizedDeviceName)) ||
+        (normalizedDeviceName.includes('ipad') &&
+            supportedIosBezelDevices.includes(normalizedDeviceName) &&
+            (width / devicePixelRatio >= 1133 || height / devicePixelRatio >= 1133));
+    let isIosBezelError = false;
+    if (addIOSBezelCorners && isSupported) {
+        const { topImageName, bottomImageName } = getIosBezelImageNames(normalizedDeviceName);
+        if (topImageName && bottomImageName) {
+            const __filename = fileURLToPath(import.meta.url);
+            const __dirname = dirname(__filename);
+            const topImage = readFileSync(join(__dirname, '..', '..', 'assets', 'ios', `${topImageName}.png`), { encoding: 'base64' });
+            const bottomImage = readFileSync(join(__dirname, '..', '..', 'assets', 'ios', `${bottomImageName}.png`), { encoding: 'base64' });
+            const topBase64Image = isLandscape ? await rotateBase64Image({ base64Image: topImage, degrees: 90 }) : topImage;
+            const bottomBase64Image = isLandscape ? await rotateBase64Image({ base64Image: bottomImage, degrees: 90 }) : bottomImage;
+            image.composite(await Jimp.read(Buffer.from(topBase64Image, 'base64')), 0, 0);
+            image.composite(await Jimp.read(Buffer.from(bottomBase64Image, 'base64')), isLandscape ? width - getBase64ScreenshotSize(bottomImage).height : 0, isLandscape ? 0 : height - getBase64ScreenshotSize(bottomImage).height);
+        }
+        else {
+            isIosBezelError = true;
+        }
+    }
+    if (addIOSBezelCorners && !isSupported) {
+        isIosBezelError = true;
+    }
+    if (isIosBezelError) {
+        log.warn('\x1b[33m%s\x1b[0m', `
+#####################################################################################
+WARNING:
+We could not find the bezel corners for the device '${deviceName}'.
+The normalized device name is '${normalizedDeviceName}'
+and couldn't be found in the supported devices:
+${supportedIosBezelDevices.join(', ')}
+#####################################################################################
+`);
+    }
+}
+/**
+ * Crop the image and convert it to a base64 image
+ */
+export async function cropAndConvertToDataURL({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, height, isIOS, isLandscape, sourceX, sourceY, width, }) {
+    const image = await Jimp.read(Buffer.from(base64Image, 'base64'));
+    const croppedImage = image.crop({ x: sourceX, y: sourceY, w: width, h: height });
+    if (isIOS) {
+        await handleIOSBezelCorners({ addIOSBezelCorners, image: croppedImage, deviceName, devicePixelRatio, height, isLandscape, width });
+    }
+    const base64CroppedImage = await croppedImage.getBase64(JimpMime.png);
+    return base64CroppedImage.replace(/^data:image\/png;base64,/, '');
+}
+/**
+ * Make a cropped image with Canvas
+ */
+export async function makeCroppedBase64Image({ addIOSBezelCorners, base64Image, deviceName, devicePixelRatio, isWebDriverElementScreenshot = false, isIOS, isLandscape, rectangles, resizeDimensions = DEFAULT_RESIZE_DIMENSIONS, }) {
+    // Rotate the image if needed and get the screenshot size
+    const newBase64Image = await getRotatedImageIfNeeded({ isWebDriverElementScreenshot, isLandscape, base64Image });
+    const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(base64Image);
+    // Determine/Get the size of the cropped screenshot and cut out dimensions
+    const { top, right, bottom, left } = { ...DEFAULT_RESIZE_DIMENSIONS, ...resizeDimensions };
+    const { height, width, x, y } = rectangles;
+    const [sourceXStart, sourceXEnd] = getAdjustedAxis({
+        length: width,
+        maxDimension: screenshotWidth,
+        paddingEnd: right,
+        paddingStart: left,
+        start: x,
+        warningType: 'WIDTH'
+    });
+    const [sourceYStart, sourceYEnd] = getAdjustedAxis({
+        length: height,
+        maxDimension: screenshotHeight,
+        paddingEnd: bottom,
+        paddingStart: top,
+        start: y,
+        warningType: 'HEIGHT',
+    });
+    // Create the canvas and draw the image on it
+    return cropAndConvertToDataURL({
+        addIOSBezelCorners,
+        base64Image: newBase64Image,
+        deviceName,
+        devicePixelRatio,
+        height: sourceYEnd - sourceYStart,
+        isIOS,
+        isLandscape,
+        sourceX: sourceXStart,
+        sourceY: sourceYStart,
+        width: sourceXEnd - sourceXStart,
+    });
+}
+/**
+ * Execute the image compare
+ */
+export async function executeImageCompare({ isViewPortScreenshot, isNativeContext, options, testContext, }) {
+    // 1. Set some variables
+    const { devicePixelRatio, deviceRectangles, ignoreRegions = [], isAndroidNativeWebScreenshot, isAndroid, fileName, } = options;
+    const { actualFolder, autoSaveBaseline, baselineFolder, browserName, deviceName, diffFolder, isMobile, savePerInstance } = options.folderOptions;
+    const imageCompareOptions = { ...options.compareOptions.wic, ...options.compareOptions.method };
+    // 2. Create all needed folders and file paths
+    const filePaths = prepareComparisonFilePaths({
+        actualFolder,
+        baselineFolder,
+        diffFolder,
+        browserName,
+        deviceName,
+        isMobile,
+        savePerInstance,
+        fileName
+    });
+    const { actualFilePath, baselineFilePath, diffFilePath } = filePaths;
+    // 3a. Check if there is a baseline image, and determine if it needs to be auto saved or not
+    await checkBaselineImageExists({ actualFilePath, baselineFilePath, autoSaveBaseline });
+    // 3b. At this point we shouldn't have a diff image, so check if there is a diff image and remove it if it exists
+    await removeDiffImageIfExists(diffFilePath);
+    // 4. Prepare the compare
+    // 4a.Determine the ignore options
+    const ignore = prepareIgnoreOptions(imageCompareOptions);
+    // 4b. Determine the ignore rectangles for the block outs
+    const { ignoredBoxes } = prepareIgnoreRectangles({
+        blockOut: imageCompareOptions.blockOut ?? [],
+        ignoreRegions,
+        deviceRectangles,
+        devicePixelRatio,
+        isMobile,
+        isNativeContext,
+        isAndroid,
+        isAndroidNativeWebScreenshot,
+        isViewPortScreenshot,
+        imageCompareOptions: {
+            blockOutSideBar: imageCompareOptions.blockOutSideBar,
+            blockOutStatusBar: imageCompareOptions.blockOutStatusBar,
+            blockOutToolBar: imageCompareOptions.blockOutToolBar,
+        }
+    });
+    const compareOptions = {
+        ignore,
+        ...(ignoredBoxes.length > 0 ? { output: { ignoredBoxes } } : {}),
+        scaleToSameSize: imageCompareOptions.scaleImagesToSameSize,
+    };
+    // 5. Execute the compare and retrieve the data
+    const data = await compareImages(readFileSync(baselineFilePath), readFileSync(actualFilePath), compareOptions);
+    const rawMisMatchPercentage = data.rawMisMatchPercentage;
+    const reportMisMatchPercentage = imageCompareOptions.rawMisMatchPercentage
+        ? rawMisMatchPercentage
+        : Number(data.rawMisMatchPercentage.toFixed(3));
+    // 6. Generate and save the diff when there is a diff
+    const { diffBoundingBoxes, storeDiffs } = await generateAndSaveDiff(data, imageCompareOptions, ignoredBoxes, diffFilePath, rawMisMatchPercentage);
+    // 7. Create JSON report if requested
+    await createJsonReportIfNeeded({
+        boundingBoxes: {
+            diffBoundingBoxes,
+            ignoredBoxes,
+        },
+        data,
+        fileName,
+        filePaths,
+        devicePixelRatio,
+        imageCompareOptions,
+        testContext,
+        storeDiffs,
+    });
+    // 8. Handle visual baseline update
+    let finalReportMisMatchPercentage = reportMisMatchPercentage;
+    if (updateVisualBaseline()) {
+        await checkBaselineImageExists({
+            actualFilePath,
+            baselineFilePath,
+            updateBaseline: true
+        });
+        finalReportMisMatchPercentage = 0;
+    }
+    // 9. Return the comparison data
+    return imageCompareOptions.returnAllCompareData
+        ? {
+            fileName,
+            folders: {
+                actual: actualFilePath,
+                baseline: baselineFilePath,
+                ...(diffFilePath ? { diff: diffFilePath } : {}),
+            },
+            misMatchPercentage: finalReportMisMatchPercentage,
+        }
+        : finalReportMisMatchPercentage;
+}
+/**
+ * Make a full page image with Canvas
+ */
+export async function makeFullPageBase64Image(screenshotsData, { devicePixelRatio, isLandscape }) {
+    const amountOfScreenshots = screenshotsData.data.length;
+    const { fullPageHeight: canvasHeight, fullPageWidth: canvasWidth } = screenshotsData;
+    const canvas = await new Jimp({ width: canvasWidth, height: canvasHeight });
+    // Load all the images
+    for (let i = 0; i < amountOfScreenshots; i++) {
+        const currentScreenshot = screenshotsData.data[i].screenshot;
+        const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(currentScreenshot, devicePixelRatio);
+        const isRotated = isLandscape && screenshotHeight > screenshotWidth;
+        const newBase64Image = isRotated ? await rotateBase64Image({ base64Image: currentScreenshot, degrees: 90 }) : currentScreenshot;
+        const { canvasYPosition, imageHeight, imageWidth, imageXPosition, imageYPosition } = screenshotsData.data[i];
+        const image = await Jimp.read(Buffer.from(newBase64Image, 'base64'));
+        canvas.composite(image.crop({ x: imageXPosition, y: imageYPosition, w: imageWidth, h: imageHeight }), 0, canvasYPosition);
+    }
+    const base64FullPageImage = await canvas.getBase64(JimpMime.png);
+    return base64FullPageImage.replace(/^data:image\/png;base64,/, '');
+}
+/**
+ * Save the base64 image to a file
+ */
+export async function saveBase64Image(base64Image, filePath) {
+    await fsPromises.mkdir(dirname(filePath), { recursive: true });
+    await fsPromises.writeFile(filePath, Buffer.from(base64Image, 'base64'));
+}
+/**
+ * Create a canvas with the ignore boxes if they are present
+ */
+export async function addBlockOuts(screenshot, ignoredBoxes) {
+    const image = await Jimp.read(Buffer.from(screenshot, 'base64'));
+    // Loop over all ignored areas and add them to the current canvas
+    for (const ignoredBox of ignoredBoxes) {
+        const { right: ignoredBoxWidth, bottom: ignoredBoxHeight, left: x, top: y } = ignoredBox;
+        const ignoreCanvas = new Jimp({ width: ignoredBoxWidth - x, height: ignoredBoxHeight - y, color: '#39aa56' });
+        ignoreCanvas.opacity(0.5);
+        image.composite(ignoreCanvas, x, y);
+    }
+    const base64ImageWithBlockOuts = await image.getBase64(JimpMime.png);
+    return base64ImageWithBlockOuts.replace(/^data:image\/png;base64,/, '');
+}
+/**
+ * Rotate a base64 image
+ * Tnx to https://gist.github.com/Zyndoras/6897abdf53adbedf02564808aaab94db
+ */
+export async function rotateBase64Image({ base64Image, degrees }) {
+    const image = await Jimp.read(Buffer.from(base64Image, 'base64'));
+    const rotatedImage = image.rotate(degrees);
+    const base64RotatedImage = await rotatedImage.getBase64(JimpMime.png);
+    return base64RotatedImage.replace(/^data:image\/png;base64,/, '');
+}
+/**
+ * Take a based64 screenshot of an element and resize it
+ */
+export async function takeResizedBase64Screenshot({ browserInstance, element, devicePixelRatio, isIOS, resizeDimensions, }) {
+    const awaitedElement = await element;
+    if (!isWdioElement(awaitedElement)) {
+        log.info('awaitedElement = ', JSON.stringify(awaitedElement));
+    }
+    // Get the element position
+    const elementRegion = await browserInstance.getElementRect(awaitedElement.elementId);
+    // Create a screenshot
+    const base64Image = await takeBase64Screenshot(browserInstance);
+    // Crop it out with the correct dimensions
+    // Make the image smaller
+    // Provide the size of the image with the resizeDimensions on left, right, top and bottom
+    const resizedBase64Image = await makeCroppedBase64Image({
+        addIOSBezelCorners: false,
+        base64Image,
+        deviceName: '',
+        devicePixelRatio,
+        isIOS,
+        isLandscape: false,
+        rectangles: calculateDprData({
+            height: elementRegion.height,
+            width: elementRegion.width,
+            x: elementRegion.x,
+            y: elementRegion.y,
+        }, isIOS ? devicePixelRatio : 1),
+        resizeDimensions,
+    });
+    return resizedBase64Image;
+}
+/**
+ * Take a base64 screenshot of an element
+ */
+export async function takeBase64ElementScreenshot({ browserInstance, element, devicePixelRatio, isIOS, resizeDimensions, }) {
+    const shouldTakeResizedScreenshot = (resizeDimensions.top !== DEFAULT_RESIZE_DIMENSIONS.top ||
+        resizeDimensions.right !== DEFAULT_RESIZE_DIMENSIONS.right ||
+        resizeDimensions.bottom !== DEFAULT_RESIZE_DIMENSIONS.bottom ||
+        resizeDimensions.left !== DEFAULT_RESIZE_DIMENSIONS.left);
+    if (!shouldTakeResizedScreenshot) {
+        try {
+            const awaitedElement = await element;
+            if (!isWdioElement(awaitedElement)) {
+                log.error(' takeBase64ElementScreenshot element is not a valid element because of ', JSON.stringify(awaitedElement));
+            }
+            return await awaitedElement.takeElementScreenshot(awaitedElement.elementId);
+        }
+        catch (error) {
+            log.error('Error taking an element screenshot with the default `element.takeElementScreenshot(elementId)` method:', error, ' We will retry with a resized screenshot');
+        }
+    }
+    return await takeResizedBase64Screenshot({
+        browserInstance,
+        element,
+        devicePixelRatio,
+        isIOS,
+        resizeDimensions,
+    });
+}

package/dist/methods/images.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=images.test.d.ts.map

package/dist/methods/images.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"images.test.d.ts","sourceRoot":"","sources":["../../src/methods/images.test.ts"],"names":[],"mappings":""}