sqip - npm Package Compare versions

Comparing version 1.0.0-alpha.50 to 1.0.0-alpha.51

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.0.0-alpha.51](https://github.com/axe312ger/sqip/compare/sqip@1.0.0-alpha.50...sqip@1.0.0-alpha.51) (2024-03-28)
+
+
+### Features
+
+* sqip now can naively detect the image background color and the pixels blugin supports setting background color which will be handled as transparent pixels ([f4b7748](https://github.com/axe312ger/sqip/commit/f4b774859591390be3e80c6f3f8b0ec062af4716))
+
+
+
+
+
 # [1.0.0-alpha.50](https://github.com/axe312ger/sqip/compare/sqip@1.0.0-alpha.49...sqip@1.0.0-alpha.50) (2024-03-22)
@@ -8,0 +19,0 @@

dist/helpers.d.ts

 /// <reference types="node" />
+/// <reference types="node" />
 import { SVG, Element } from '@svgdotjs/svg.js';
@@ -15,3 +16,4 @@ import type { Palette } from '@behold/sharp-vibrant/lib/color';
 export declare function parseColor({ palette, color }: ParseColorOptions): string;
+export declare function findBackgroundColor(imageBuffer: Buffer): Promise<string>;
 export {};
 //# sourceMappingURL=helpers.d.ts.map

dist/helpers.js

@@ -6,3 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.parseColor = exports.locateFiles = exports.isError = exports.loadSVG = void 0;
+exports.findBackgroundColor = exports.parseColor = exports.locateFiles = exports.isError = exports.loadSVG = void 0;
 const path_1 = __importDefault(require("path"));
@@ -14,2 +14,3 @@ const svg_js_1 = require("@svgdotjs/svg.js");
 const fs_extra_1 = __importDefault(require("fs-extra"));
+const sharp_1 = __importDefault(require("sharp"));
 const debug = (0, debug_1.default)('sqip');
@@ -71,2 +72,60 @@ const loadSVG = async (svg) => {
 exports.parseColor = parseColor;
+async function findBackgroundColor(imageBuffer) {
+    const image = (0, sharp_1.default)(imageBuffer);
+    const { width, height } = await image.metadata();
+    if (!width || !height) {
+        throw new Error('Unable to detect image sizes for background color extraction.');
+    }
+    // Sample edge pixels
+    const edgePixels = await Promise.all([
+        // Top left corner
+        image
+            .clone()
+            .extract({ left: 0, top: 0, width: 1, height: 1 })
+            .raw()
+            .toBuffer(),
+        // Top right corner
+        image
+            .clone()
+            .extract({ left: 1, top: 1, width: 1, height: 1 })
+            .raw()
+            .toBuffer(),
+        // Bottom left corner
+        image
+            .clone()
+            .extract({ left: 0, top: height - 1, width: 1, height: 1 })
+            .raw()
+            .toBuffer(),
+        // Bottom right corner
+        image
+            .clone()
+            .extract({ left: width - 1, top: height - 1, width: 1, height: 1 })
+            .raw()
+            .toBuffer()
+    ]);
+    // Process edge pixels to find the most common color including alpha channel
+    const colors = edgePixels.map((pixel) => {
+        // Convert raw pixel data (RGBA) to hex color, including alpha
+        return '#' + pixel.toString('hex');
+    });
+    // Count occurrences of each color, considering the alpha channel
+    const colorCount = colors.reduce((acc, color) => {
+        acc[color] = (acc[color] || 0) + 1;
+        return acc;
+    }, {});
+    // Find the most frequent color, taking into account transparency
+    const backgroundColor = Object.keys(colorCount).reduce((a, b) => colorCount[a] > colorCount[b] ? a : b);
+    // If you want to detect and handle (semi) transparent backgrounds specifically
+    const isTransparent = (color) => {
+        // Extract the alpha value from the hex color
+        const alpha = parseInt(color.slice(7, 9), 16) / 255;
+        return alpha < 1;
+    };
+    // Example usage: Check if the background is transparent
+    if (isTransparent(backgroundColor)) {
+        return backgroundColor;
+    }
+    return backgroundColor;
+}
+exports.findBackgroundColor = findBackgroundColor;
 //# sourceMappingURL=helpers.js.map

dist/sqip.d.ts

@@ -45,2 +45,3 @@ /// <reference types="node" />
     palette: Palette;
+    backgroundColor: string;
     height: number;
@@ -47,0 +48,0 @@ width: number;

dist/sqip.js

@@ -58,2 +58,3 @@ "use strict";
 const PALETTE_KEYS = [
+    'Background',
     'Vibrant',
@@ -192,3 +193,6 @@ 'DarkVibrant',
         paletteTable.push(PALETTE_KEYS);
-        paletteTable.push(PALETTE_KEYS.map((key) => metadata.palette[key]?.hex)
+        paletteTable.push([
+            metadata.backgroundColor,
+            ...PALETTE_KEYS.map((key) => metadata.palette[key]?.hex)
+        ]
             .filter((hex) => typeof hex === 'string')
@@ -198,3 +202,3 @@ .map((hex) => chalk_1.default.hex(hex)(hex)));
         Object.keys(metadata)
-            .filter((key) => ![...mainKeys, 'palette'].includes(key))
+            .filter((key) => ![...mainKeys, 'palette', 'backgroundColor'].includes(key))
             .forEach((key) => {
@@ -226,2 +230,3 @@ console.log(chalk_1.default.bold(`${key}:`));
     })();
+    const backgroundColor = await (0, helpers_1.findBackgroundColor)(buffer);
     const { name: filename } = path_1.default.parse(filePath);
@@ -235,2 +240,3 @@ const mimeType = mime_1.default.getType(filePath) || 'unknown';
         palette: paletteResult.palette,
+        backgroundColor,
         // @todo this should be set by plugins and detected initially
@@ -365,2 +371,3 @@ type: 'unknown',
     originalWidth: 640,
+    backgroundColor: '#FFFFFF00',
     palette: {
@@ -367,0 +374,0 @@ DarkMuted: new color_1.Swatch([4, 2, 0], 420),

package.json

 {
   "name": "sqip",
-  "version": "1.0.0-alpha.50",
+  "version": "1.0.0-alpha.51",
   "description": "> TODO: description",
@@ -70,3 +70,3 @@ "author": "Benedikt Rötsch <[e-mail]>",
   },
-  "gitHead": "70b338c0fcb592ef9a51b587e4ffcdb66ee3959b"
+  "gitHead": "d445759aa761efb81932b9c06eddf05538855072"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49591

increased by11.95%

Lines of code

592

increased by13.19%

No dependency changes