chore!: migrate sharp -> jsquash/png

Author: KuznetsovRoman

.eslintignore

@@ -2,7 +2,7 @@
 
 [![Build Status](https://travis-ci.org/gemini-testing/looks-same.svg?branch=master)](https://travis-ci.org/gemini-testing/looks-same)
 
-Node.js library for comparing images, taking into account human color
+Pure node.js library for comparing png images, taking into account human color
 perception. It is created specially for the needs of visual regression testing
 for [`testplane`](http://github.com/gemini-testing/testplane) utility, but can be used
 for other purposes.
@@ -14,12 +14,6 @@ Benchmark is presented in the corresponding directory.
 - [Benchmark description](./benchmark/README.md)
 - [Benchmark results](./benchmark/results.md)
 
-## Supported image formats
-
-JPEG, PNG, WebP, GIF, AVIF, TIFF and SVG images are supported.
-
-*Note: If you want to compare jpeg files, you may encounter random differences due to the jpeg structure if they are not lossless jpeg files.*
-
 ## Comparing images
 
 ```javascript

.eslintrc.js

@@ -0,0 +1,9 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+export default [
+  {ignores: ["lib/vendor/**", "**/.*", "node_modules/**"]},
+  {files: ["index.js", "lib/**/*.js", "benchmark/**/*.js"], languageOptions: {sourceType: "commonjs", globals: globals.node}},
+  {files: ["test/**/*.js"], languageOptions: { globals: {...globals.node, ...globals.mocha, ...globals.chai} }},
+  pluginJs.configs.recommended
+];

README.md

@@ -8,7 +8,7 @@ const AntialiasingComparator = require('./lib/antialiasing-comparator');
 const IgnoreCaretComparator = require('./lib/ignore-caret-comparator');
 const DiffArea = require('./lib/diff-area');
 const utils = require('./lib/utils');
-const {JND} = require('./lib/constants');
+const {JND, PNG: {RGBA_CHANNELS}} = require('./lib/constants');
 
 const makeAntialiasingComparator = (comparator, img1, img2, opts) => {
     const antialiasingComparator = new AntialiasingComparator(comparator, img1, img2, opts);
@@ -24,13 +24,42 @@ function makeCIEDE2000Comparator(tolerance) {
     const upperBound = tolerance * 6.2; // cie76 <= 6.2 * ciede2000
     const lowerBound = tolerance * 0.695; // cie76 >= 0.695 * ciede2000
 
+    let rgbColor1 = {};
+    let rgbColor2 = {};
+    let labColor1 = {};
+    let labColor2 = {};
+
     return function doColorsLookSame(data) {
         if (areColorsSame(data)) {
             return true;
         }
+
+        let lab1, lab2;
+
         /*jshint camelcase:false*/
-        const lab1 = colorDiff.rgb_to_lab(data.color1);
-        const lab2 = colorDiff.rgb_to_lab(data.color2);
+        if (areColorsSame({color1: data.color1, color2: rgbColor1})) {
+            lab1 = labColor1;
+        } else if (areColorsSame({color1: data.color1, color2: rgbColor2})) {
+            lab1 = labColor2;
+        }
+
+        if (areColorsSame({color1: data.color2, color2: rgbColor1})) {
+            lab2 = labColor1;
+        } else if (areColorsSame({color1: data.color2, color2: rgbColor2})) {
+            lab2 = labColor2;
+        }
+
+        if (!lab1) {
+            lab1 = colorDiff.rgb_to_lab(data.color1);
+            rgbColor1 = data.color1;
+            labColor1 = lab1;
+        }
+
+        if (!lab2) {
+            lab2 = colorDiff.rgb_to_lab(data.color2);
+            rgbColor2 = data.color2;
+            labColor2 = lab2;
+        }
 
         const cie76 = Math.sqrt(
             (lab1.L - lab2.L) * (lab1.L - lab2.L) +
@@ -93,13 +122,14 @@ const buildDiffImage = async (img1, img2, options) => {
     const minHeight = Math.min(img1.height, img2.height);
 
     const highlightColor = options.highlightColor;
-    const resultBuffer = Buffer.alloc(width * height * 3);
+    const resultBuffer = Buffer.allocUnsafe(width * height * RGBA_CHANNELS);
 
     const setPixel = (buf, x, y, {R, G, B}) => {
-        const pixelInd = (y * width + x) * 3;
+        const pixelInd = (y * width + x) * RGBA_CHANNELS;
         buf[pixelInd] = R;
         buf[pixelInd + 1] = G;
         buf[pixelInd + 2] = B;
+        buf[pixelInd + 3] = 0xff;
     };
 
     await iterateRect(width, height, (x, y) => {
@@ -118,7 +148,7 @@ const buildDiffImage = async (img1, img2, options) => {
         }
     });
 
-    return img.fromBuffer(resultBuffer, {raw: {width, height, channels: 3}});
+    return img.fromBuffer(resultBuffer, {rgb: {width, height}});
 };
 
 const getToleranceFromOpts = (opts) => {

eslint.config.mjs

@@ -1,9 +1,25 @@
 'use strict';
 
+// https://en.wikipedia.org/wiki/PNG
+const PNG = {
+    RGBA_CHANNELS: 4,
+    WIDTH_OFFSET: 16,
+    HEIGHT_OFFSET: 20,
+    SIGNATURE: Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]),
+    BIT_DEPTH_EIGHT_BIT: 8,
+    COLOR_TYPE_RGBA: 6,
+    COMPRESSION_DEFLATE: 0,
+    FILTER_NO_FILTER: 0,
+    INTERLACE_NO_INTERLACE: 0,
+    IHDR_LENGTH: 13,
+    MIN_ASSIST_BYTES: 57
+};
+
 module.exports = {
     JND: 2.3, // Just noticeable difference if ciede2000 >= JND then colors difference is noticeable by human eye
     REQUIRED_IMAGE_FIELDS: ['source', 'boundingBox'],
     REQUIRED_BOUNDING_BOX_FIELDS: ['left', 'top', 'right', 'bottom'],
     CLUSTERS_SIZE: 10,
-    DIFF_IMAGE_CHANNELS: 3
+    BITS_IN_BYTE: 8,
+    PNG,
 };

index.js

@@ -3,8 +3,8 @@
 const Image = require('./image');
 
 module.exports = class BoundedImage extends Image {
-    constructor(img, boundingBox) {
-        super(img);
+    constructor(buffer, rgb, boundingBox) {
+        super(buffer, rgb);
 
         this._boundingBox = boundingBox;
     }

lib/constants.js

@@ -0,0 +1,68 @@
+const {unsigned: crc32} = require('buffer-crc32');
+const zlib = require('node:zlib');
+const { PNG } = require('../constants');
+
+const COMPRESSION_LEVEL = 3;
+
+const convertRgbaToScanlines = (rgba, width, height) => {
+    const stride = width * PNG.RGBA_CHANNELS;
+    const scanlines = Buffer.allocUnsafe(height * (1 + stride)); // extra byte for filter
+
+    let scanlineOffset = 0;
+    let pixelDataOffset = 0;
+
+    for (let y = 0; y < height; y++) {
+        scanlineOffset = scanlines.writeUInt8(PNG.FILTER_NO_FILTER, scanlineOffset);
+        scanlineOffset += rgba.copy(scanlines, scanlineOffset, pixelDataOffset, pixelDataOffset + stride);
+
+        pixelDataOffset += stride;
+    }
+
+    if (scanlineOffset !== scanlines.byteLength) {
+        throw new Error('Got malformed input while trying to convert rgba to png');
+    }
+
+    return scanlines;
+}
+
+exports.convertRgbaToPng = (rgba, width, height, compressionLevel = COMPRESSION_LEVEL) => {
+    const scanlines = convertRgbaToScanlines(rgba, width, height);
+    const compressedData = zlib.deflateSync(scanlines, { level: compressionLevel });
+    const resultBuffer = Buffer.allocUnsafe(PNG.MIN_ASSIST_BYTES + compressedData.length);
+
+    let pointer = 0;
+
+    // signature
+    pointer += PNG.SIGNATURE.copy(resultBuffer);
+
+    // IHDR
+    const ihdrPointer = (pointer = resultBuffer.writeUInt32BE(PNG.IHDR_LENGTH, pointer));
+    pointer += resultBuffer.write("IHDR", pointer, "ascii");
+    pointer = resultBuffer.writeUInt32BE(width, pointer);
+    pointer = resultBuffer.writeUInt32BE(height, pointer);
+    pointer = resultBuffer.writeUInt8(PNG.BIT_DEPTH_EIGHT_BIT, pointer);
+    pointer = resultBuffer.writeUInt8(PNG.COLOR_TYPE_RGBA, pointer);
+    pointer = resultBuffer.writeUInt8(PNG.COMPRESSION_DEFLATE, pointer);
+    pointer = resultBuffer.writeUInt8(PNG.FILTER_NO_FILTER, pointer);
+    pointer = resultBuffer.writeUInt8(PNG.INTERLACE_NO_INTERLACE, pointer);
+    const ihdrCrc = crc32(Buffer.from(resultBuffer.buffer, ihdrPointer, pointer - ihdrPointer));
+    pointer = resultBuffer.writeUInt32BE(ihdrCrc, pointer);
+
+    // IDAT
+    const idatPointer = (pointer = resultBuffer.writeUInt32BE(compressedData.length, pointer));
+    pointer += resultBuffer.write("IDAT", idatPointer, "ascii");
+    pointer += compressedData.copy(resultBuffer, pointer);
+    const idatCrc = crc32(Buffer.from(resultBuffer.buffer, idatPointer, pointer - idatPointer));
+    pointer = resultBuffer.writeUInt32BE(idatCrc, pointer);
+
+    // IEND (empty)
+    const iendPointer = (pointer = resultBuffer.writeUInt32BE(0, pointer));
+    pointer += resultBuffer.write("IEND", pointer, "ascii");
+    const iendCrc = crc32(Buffer.from(resultBuffer.buffer, iendPointer, pointer - iendPointer));
+    pointer = resultBuffer.writeUInt32BE(iendCrc, pointer);
+
+    if (pointer !== resultBuffer.byteLength) {
+        throw new Error("Got malformed input while trying to convert rgba to png");
+    }
+    return resultBuffer;
+};

lib/image/bounded-image.js

@@ -1,49 +1,77 @@
 'use strict';
 
+const fs = require('fs');
+const {convertRgbaToPng} = require('./eight-bit-rgba-to-png');
 const ImageBase = require('../image-base');
+const {BITS_IN_BYTE, PNG: {WIDTH_OFFSET, HEIGHT_OFFSET, RGBA_CHANNELS}} = require('../constants');
+
+const initJsquashPromise = new Promise(resolve => {
+    const wasmLocation = require.resolve('@jsquash/png/codec/pkg/squoosh_png_bg.wasm');
+
+    Promise.all([
+        import('@jsquash/png/decode.js'),
+        fs.promises.readFile(wasmLocation)
+    ]).then(([mod, wasmBytes]) => mod.init(wasmBytes)).then(resolve);
+});
+
+/** @type import('@jsquash/png')['decode'] */
+const jsquashDecode = (buffer, opts) => {
+    return Promise.all([
+        import('@jsquash/png/decode.js'),
+        initJsquashPromise
+    ]).then(([{decode}]) => decode(buffer, opts));
+};
 
 module.exports = class Image extends ImageBase {
-    constructor(img) {
+    constructor(buffer, rgb) {
         super();
 
-        this._img = img;
+        if (rgb) {
+            this._width = rgb.width;
+            this._height = rgb.height;
+            this._imgData = buffer;
+        } else {
+            this._width = buffer.readUInt32BE(WIDTH_OFFSET);
+            this._height = buffer.readUInt32BE(HEIGHT_OFFSET);
+            this._imgDataPromise = jsquashDecode(buffer, {bitDepth: BITS_IN_BYTE}).then(({data}) => Buffer.from(data));
+        }
     }
 
-    async init() {
-        const {data, info} = await this._img.raw().toBuffer({resolveWithObject: true});
+    async _getImgData() {
+        if (this._imgData) {
+            return this._imgData;
+        }
 
-        this._buffer = data;
-        this._width = info.width;
-        this._height = info.height;
-        this._channels = info.channels;
+        return this._imgData = await this._imgDataPromise;
     }
 
-    async initMeta() {
-        const {width, height, channels} = await this._img.metadata();
-
-        this._width = width;
-        this._height = height;
-        this._channels = channels;
+    async init() {
+        await this._getImgData();
     }
 
     getPixel(x, y) {
-        const idx = this._getIdx(x, y);
+        const idx = (this._width * y + x) * RGBA_CHANNELS;
+
         return {
-            R: this._buffer[idx],
-            G: this._buffer[idx + 1],
-            B: this._buffer[idx + 2]
+            R: this._imgData[idx],
+            G: this._imgData[idx + 1],
+            B: this._imgData[idx + 2]
         };
     }
 
-    _getIdx(x, y) {
-        return (this._width * y + x) * this._channels;
+    async _getPngBuffer() {
+        const imageData = await this._getImgData();
+
+        return convertRgbaToPng(imageData, this._width, this._height);
     }
 
     async save(path) {
-        return this._img.toFile(path);
+        const data = await this._getPngBuffer();
+
+        return fs.promises.writeFile(path, data);
     }
 
     async createBuffer(extension) {
-        return this._img.toFormat(extension).toBuffer();
+        return extension === 'raw' ? Buffer.from(this._imgData.data) : this._getPngBuffer();
     }
 };

lib/image/eight-bit-rgba-to-png.js

@@ -1,25 +1,21 @@
 'use strict';
 
-const fs = require('fs-extra');
+const fs = require('fs');
 const NestedError = require('nested-error-stacks');
-const sharp = require('sharp');
 const OriginalIMG = require('./original-image');
 const BoundedIMG = require('./bounded-image');
 
-const createimage = async (img, {boundingBox} = {}) => {
+const createimage = async (buffer, {boundingBox, rgb} = {}) => {
     return boundingBox
-        ? BoundedIMG.create(img, boundingBox)
-        : OriginalIMG.create(img);
+        ? BoundedIMG.create(buffer, rgb, boundingBox)
+        : OriginalIMG.create(buffer, rgb);
 };
 
-exports.fromBuffer = async (buffer, opts) => {
-    const img = sharp(buffer, opts);
-    return createimage(img, opts);
-};
+exports.fromBuffer = (buffer, opts) => createimage(buffer, opts);
 
 exports.fromFile = async (filePath, opts = {}) => {
     try {
-        const buffer = await fs.readFile(filePath);
+        const buffer = await fs.promises.readFile(filePath);
         return exports.fromBuffer(buffer, opts);
     } catch (err) {
         throw new NestedError(`Can't load img file ${filePath}`, err);