flexysnap 0.1.2-alpha.3 → 0.1.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexysnap",
-  "version": "0.1.2-alpha.3",
+  "version": "0.1.3-alpha.1",
   "description": "Flexible visual snapshot testing for Playwright, built for e-commerce.",
   "keywords": [
     "playwright",
@@ -44,10 +44,9 @@
   },
   "dependencies": {
     "@playwright/test": "^1.61.1",
-    "canvas": "^3.2.3",
-    "sharp": "^0.35.3"
+    "canvas": "^3.2.3"
   },
   "devDependencies": {
     "eslint": "^9.9.0"
   }
-}
+}

package/src/annotateWireframe.js

@@ -1,7 +1,20 @@
-import sharp from 'sharp';
 import fs from 'fs';
 import path from 'path';
-import { createCanvas } from 'canvas';
+import { createCanvas, loadImage } from 'canvas';
+
+function applyGrayscale(ctx, width, height) {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+
+    for (let i = 0; i < data.length; i += 4) {
+        const gray = Math.round(0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]);
+        data[i] = gray;
+        data[i + 1] = gray;
+        data[i + 2] = gray;
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+}
 
 async function annotateWireframeFile(wireframeFile, screenshotFile) {
     if (!fs.existsSync(wireframeFile)) {
@@ -17,13 +30,16 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
     const wireframeContent = fs.readFileSync(wireframeFile, 'utf-8');
     const wireframe = JSON.parse(wireframeContent);
 
-    const metadata = await sharp(screenshotFile).metadata();
-    const width = metadata.width;
-    const height = metadata.height;
+    const screenshot = await loadImage(screenshotFile);
+    const width = screenshot.width;
+    const height = screenshot.height;
 
     const canvas = createCanvas(width, height);
     const ctx = canvas.getContext('2d');
 
+    ctx.drawImage(screenshot, 0, 0);
+    applyGrayscale(ctx, width, height);
+
     const colors = {
         box: { fill: 'rgba(220, 160, 40, 0.4)', stroke: '#E6A500' },
         image: { fill: 'rgba(70, 180, 120, 0.4)', stroke: '#2EBC6F' },
@@ -70,19 +86,11 @@ async function annotateWireframeFile(wireframeFile, screenshotFile) {
         }
     }
 
-    const overlayBuffer = canvas.toBuffer('image/png');
-
     const outputDir = path.dirname(screenshotFile);
     const basename = path.basename(screenshotFile, '.png');
     const outputPath = path.join(outputDir, `${basename}_wireframe.png`);
 
-    await sharp(screenshotFile)
-        .grayscale()
-        .composite([{
-            input: overlayBuffer,
-            blend: 'over'
-        }])
-        .toFile(outputPath);
+    fs.writeFileSync(outputPath, canvas.toBuffer('image/png'));
 
     console.log(`Annotated wireframe saved to: ${outputPath}`);
 }

package/src/wireframeUtils.js

@@ -1,18 +1,25 @@
 import fs from 'fs';
 import path from 'path';
 import { logTimestamp } from './testUtils.js';
-import sharp from 'sharp';
+import { loadImage, createCanvas } from 'canvas';
 import { areWireframesStable } from './wireframeStability.js';
 
 async function getRGBHistogramFromBuffer(buffer) {
-    const {data, info} = await sharp(buffer)
-        .raw()
-        .toBuffer({resolveWithObject: true});
+    const image = await loadImage(buffer);
+    const canvas = createCanvas(image.width, image.height);
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0);
+
+    const { data } = ctx.getImageData(0, 0, image.width, image.height);
 
     const histogram = new Array(48).fill(0);
-    const pixelCount = info.width * info.height;
+    const pixelCount = image.width * image.height;
+
+    if (pixelCount === 0) {
+        return histogram;
+    }
 
-    for (let i = 0; i < data.length; i += info.channels) {
+    for (let i = 0; i < data.length; i += 4) {
         histogram[Math.floor(data[i] / 16)]++;
         histogram[Math.floor(data[i + 1] / 16) + 16]++;
         histogram[Math.floor(data[i + 2] / 16) + 32]++;