diff --git a/.gitignore b/.gitignore index 5464111..7c8bed2 100644 --- a/.gitignore +++ b/.gitignore @@ -65,7 +65,10 @@ berrypod-*.tar # In case you use Node.js/npm, you want to ignore these. npm-debug.log +node_modules/ /assets/node_modules/ +package.json +package-lock.json # Environment variables (API tokens, secrets) .env diff --git a/node_modules/.bin/pixelmatch b/node_modules/.bin/pixelmatch deleted file mode 120000 index b6a859d..0000000 --- a/node_modules/.bin/pixelmatch +++ /dev/null @@ -1 +0,0 @@ -../pixelmatch/bin/pixelmatch \ No newline at end of file diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json deleted file mode 100644 index 5075de7..0000000 --- a/node_modules/.package-lock.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "name": "simpleshop_theme", - "lockfileVersion": 3, - "requires": true, - "packages": { - "node_modules/pixelmatch": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-7.1.0.tgz", - "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==", - "dev": true, - "license": "ISC", - "dependencies": { - "pngjs": "^7.0.0" - }, - "bin": { - "pixelmatch": "bin/pixelmatch" - } - }, - "node_modules/pngjs": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-7.0.0.tgz", - "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=14.19.0" - } - } - } -} diff --git a/node_modules/pixelmatch/LICENSE b/node_modules/pixelmatch/LICENSE deleted file mode 100644 index 3194b3c..0000000 --- a/node_modules/pixelmatch/LICENSE +++ /dev/null @@ -1,15 +0,0 @@ -ISC License - -Copyright (c) 2025, Mapbox - -Permission to use, copy, modify, and/or distribute this software for any purpose -with or without fee is hereby granted, provided that the above copyright notice -and this permission notice appear in all copies. - -THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH -REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND -FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, -INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS -OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER -TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF -THIS SOFTWARE. diff --git a/node_modules/pixelmatch/README.md b/node_modules/pixelmatch/README.md deleted file mode 100644 index 1698b7f..0000000 --- a/node_modules/pixelmatch/README.md +++ /dev/null @@ -1,111 +0,0 @@ -# pixelmatch - -[![Node](https://github.com/mapbox/pixelmatch/actions/workflows/node.yml/badge.svg)](https://github.com/mapbox/pixelmatch/actions/workflows/node.yml) -[![](https://img.shields.io/badge/simply-awesome-brightgreen.svg)](https://github.com/mourner/projects) - -The smallest, simplest and fastest JavaScript pixel-level image comparison library, -originally created to compare screenshots in tests. - -Features accurate **anti-aliased pixels detection** -and **perceptual color difference metrics**. - -Inspired by [Resemble.js](https://github.com/Huddle/Resemble.js) -and [Blink-diff](https://github.com/yahoo/blink-diff). -Unlike these libraries, pixelmatch is around **150 lines of code**, -has **no dependencies**, and works on **raw typed arrays** of image data, -so it's **blazing fast** and can be used in **any environment** (Node or browsers). - -```js -const numDiffPixels = pixelmatch(img1, img2, diff, 800, 600, {threshold: 0.1}); -``` - -Implements ideas from the following papers: - -- [Measuring perceived color difference using YIQ NTSC transmission color space in mobile applications](http://www.progmat.uaem.mx:8080/artVol2Num2/Articulo3Vol2Num2.pdf) (2010, Yuriy Kotsarenko, Fernando Ramos) -- [Anti-aliased pixel and intensity slope detector](https://www.researchgate.net/publication/234126755_Anti-aliased_Pixel_and_Intensity_Slope_Detector) (2009, Vytautas Vyšniauskas) - -## [Demo](https://observablehq.com/@mourner/pixelmatch-demo) - -## Example output - -| expected | actual | diff | -| --- | --- | --- | -| ![](test/fixtures/4a.png) | ![](test/fixtures/4b.png) | ![1diff](test/fixtures/4diff.png) | -| ![](test/fixtures/3a.png) | ![](test/fixtures/3b.png) | ![1diff](test/fixtures/3diff.png) | -| ![](test/fixtures/6a.png) | ![](test/fixtures/6b.png) | ![1diff](test/fixtures/6diff.png) | - -## API - -### pixelmatch(img1, img2, output, width, height[, options]) - -- `img1`, `img2` — Image data of the images to compare (`Buffer`, `Uint8Array` or `Uint8ClampedArray`). **Note:** image dimensions must be equal. -- `output` — Image data to write the diff to, or `null` if don't need a diff image. -- `width`, `height` — Width and height of the images. Note that _all three images_ need to have the same dimensions. - -`options` is an object literal with the following properties: - -- `threshold` — Matching threshold, ranges from `0` to `1`. Smaller values make the comparison more sensitive. `0.1` by default. -- `includeAA` — If `true`, disables detecting and ignoring anti-aliased pixels. `false` by default. -- `alpha` — Blending factor of unchanged pixels in the diff output. Ranges from `0` for pure white to `1` for original brightness. `0.1` by default. -- `aaColor` — The color of anti-aliased pixels in the diff output in `[R, G, B]` format. `[255, 255, 0]` by default. -- `diffColor` — The color of differing pixels in the diff output in `[R, G, B]` format. `[255, 0, 0]` by default. -- `diffColorAlt` — An alternative color to use for dark on light differences to differentiate between "added" and "removed" parts. If not provided, all differing pixels use the color specified by `diffColor`. `null` by default. -- `diffMask` — Draw the diff over a transparent background (a mask), rather than over the original image. Will not draw anti-aliased pixels (if detected). - -Compares two images, writes the output diff and returns the number of mismatched pixels. - -## Command line - -Pixelmatch comes with a binary that works with PNG images: - -```bash -pixelmatch image1.png image2.png output.png 0.1 -``` - -## Example usage - -### Node.js - -```js -import fs from 'fs'; -import {PNG} from 'pngjs'; -import pixelmatch from 'pixelmatch'; - -const img1 = PNG.sync.read(fs.readFileSync('img1.png')); -const img2 = PNG.sync.read(fs.readFileSync('img2.png')); -const {width, height} = img1; -const diff = new PNG({width, height}); - -pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1}); - -fs.writeFileSync('diff.png', PNG.sync.write(diff)); -``` - -### Browsers - -```js -const img1 = img1Context.getImageData(0, 0, width, height); -const img2 = img2Context.getImageData(0, 0, width, height); -const diff = diffContext.createImageData(width, height); - -pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1}); - -diffContext.putImageData(diff, 0, 0); -``` - -## Install - -Install with NPM: - -```bash -npm install pixelmatch -``` - -Or use in the browser from a CDN: - -```html -