pixel-buffer-diff - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/index.d.ts

 export declare const diffImageDatas: (baseline: ImageData, candidate: ImageData, diff: ImageData, options?: {
     threshold?: number | undefined;
+    cumulatedThreshold?: number | undefined;
     enableMinimap?: boolean | undefined;
 } | undefined) => {
     diff: number;
+    cumulatedDiff: number;
     hash: number;
-    cumulatedDelta: number;
 };
 export declare const diff: (baseline8: Uint8Array | Uint8ClampedArray, candidate8: Uint8Array | Uint8ClampedArray, diff8: Uint8Array | Uint8ClampedArray, width: number, height: number, options?: {
     threshold?: number | undefined;
+    cumulatedThreshold?: number | undefined;
     enableMinimap?: boolean | undefined;
 } | undefined) => {
     diff: number;
+    cumulatedDiff: number;
     hash: number;
-    cumulatedDelta: number;
 };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

@@ -1,1 +0,1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.diff=exports.diffImageDatas=void 0;exports.diffImageDatas=(t,e,a,i)=>{const n=i&&i.enableMinimap||false,r=i&&i.threshold||.03,{width:h,height:f}=t,o=h*f,s=t.data,d=e.data,l=a.data,c=s.length,g=d.length,w=l.length;if(h!==e.width||f!==e.height||4*o!==c||c!==g)throw new Error("Different baseline and candidate ImageData dimensions");const m=a.width/h,M=w/c;if(a.height!==f||m!==M||1!==m&&3!==m)throw new Error("Invalid diff ImageData dimensions");const p=w===c?1:2,u=s.buffer,b=d.buffer,y=l.buffer,D=new Uint32Array(u,0,c>>2),x=new Uint32Array(b,0,c>>2),A=new Uint32Array(y,0,w>>2),I=r*r*35215;let U=0,v=0,E=0,_=0,j=0,q=0,C=0,O=0;const P=Math.ceil(Math.sqrt(o)/128),k=c/P&-4;for(let t=0;t<P;t++)O+=(.299*(s[U]+d[U])+.587*(s[U+1]+d[U+1])+.114*(s[U+2]+d[U+2]))/P/2,U+=k;const z=O<128,B=z?1057016832:1056964863,F=z?1056964863:1057016832;U=0;const G=Math.ceil(f/256),H=Math.ceil(h/256),J=new Uint8ClampedArray(H*G),K=2===p?h:0,L=2*K+h;for(let t=0;t<f;t++){let e=Math.floor(t/256)*H;K>0&&(A.set(new Uint32Array(u,U,h),E),E+=h,A.set(new Uint32Array(b,U,h),E+h));let a=4034073399*(4034073399^t);for(let t=0;t<h;t++,E++,v++,U+=4,a++){if(t%256==255&&e++,D[v]===x[v])continue;const i=d[U]-s[U],n=d[U+1]-s[U+1],r=d[U+2]-s[U+2],h=.29889531*i+.58662247*n+.11448223*r,f=.59597799*i-.2741761*n-.32180189*r,o=.21147017*i-.52261711*n+.31114694*r;if(h*h*.5053+f*f*.299+o*o*.1957>I){J[e]++,_++;const t=Math.abs(h);C+=t/35215,A[E]=(h>0?B:F)+(Math.min(192,8*t)<<24),0===j&&(q=a),j+=a}}E+=K}if(j-=q,n)for(let t=0;t<H*G;t++){if(J[t]>0){const e=t/H|0,a=256*(t%H),i=Math.min(a+256,h),n=256*e,r=Math.min(n+256,f);E=a+n*L+K;const o=L-i+a;for(let t=n;t<r;t++){for(let t=a;t<i;t++)A[E++]|=1082064896;E+=o}}}return{diff:_,hash:j,cumulatedDelta:C}};exports.diff=(t,e,a,i,n,r)=>(0,exports.diffImageDatas)({width:i,height:n,data:t},{width:i,height:n,data:e},{width:i*a.length/t.length,height:n,data:a},r);
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.diff=exports.diffImageDatas=void 0;exports.diffImageDatas=(t,e,a,i)=>{const n=i&&i.enableMinimap||false,r=i&&i.threshold||.03,f=i&&i.cumulatedThreshold||16,{width:h,height:o}=t,d=h*o,s=t.data,l=e.data,c=a.data,g=s.length,w=l.length,m=c.length;if(h!==e.width||o!==e.height||4*d!==g||g!==w)throw new Error("Different baseline and candidate ImageData dimensions");const u=a.width/h,M=m/g;if(a.height!==o||u!==M||1!==u&&3!==u)throw new Error("Invalid diff ImageData dimensions");const p=m===g?1:2,D=s.buffer,b=l.buffer,y=c.buffer,x=new Uint32Array(D,0,g>>2),A=new Uint32Array(b,0,g>>2),I=new Uint32Array(y,0,m>>2),U=r*r*35215;let v=0,E=0,_=0,j=0,q=0,C=0,O=0,P=0;const T=Math.ceil(Math.sqrt(d)/128),k=g/T&-4;for(let t=0;t<T;t++)P+=(.299*(s[v]+l[v])+.587*(s[v+1]+l[v+1])+.114*(s[v+2]+l[v+2]))/T/2,v+=k;const z=P<128,B=z?1057016832:1056964863,F=z?1056964863:1057016832;v=0;const G=Math.ceil(o/256),H=Math.ceil(h/256),J=new Uint8ClampedArray(H*G),K=2===p?h:0,L=2*K+h;for(let t=0;t<o;t++){let e=Math.floor(t/256)*H;K>0&&(I.set(new Uint32Array(D,v,h),_),_+=h,I.set(new Uint32Array(b,v,h),_+h));let a=4034073399*(4034073399^t);for(let t=0;t<h;t++,_++,E++,v+=4,a++){if(t%256==255&&e++,x[E]===A[E])continue;const i=l[v]-s[v],n=l[v+1]-s[v+1],r=l[v+2]-s[v+2],f=.29889531*i+.58662247*n+.11448223*r,h=.59597799*i-.2741761*n-.32180189*r,o=.21147017*i-.52261711*n+.31114694*r;if(f*f*.5053+h*h*.299+o*o*.1957>U){J[e]++,j++;const t=Math.abs(f);O+=t/35215,I[_]=(f>0?B:F)+(Math.min(192,8*t)<<24),0===q&&(C=a),q+=a}}_+=K}if(q-=C,n)for(let t=0;t<H*G;t++){if(J[t]>0){const e=t/H|0,a=256*(t%H),i=Math.min(a+256,h),n=256*e,r=Math.min(n+256,o);_=a+n*L+K;const f=L-i+a;for(let t=n;t<r;t++){for(let t=a;t<i;t++)I[_++]|=1082064896;_+=f}}}return O>f?{diff:j,cumulatedDiff:O,hash:q}:{diff:0,cumulatedDiff:0,hash:0}};exports.diff=(t,e,a,i,n,r)=>(0,exports.diffImageDatas)({width:i,height:n,data:t},{width:i,height:n,data:e},{width:i*a.length/t.length,height:n,data:a},r);

package.json

@@ -23,3 +23,3 @@ {
   ],
-  "version": "1.0.1",
+  "version": "1.1.0",
   "scripts": {
@@ -26,0 +26,0 @@ "build": "tsc && terser ./dist/index.js -c -m --module  -o ./dist/index.js"

README.md

 # **Pixel-buffer-diff** aka **Pbd** 
+
+[![npm package version](https://img.shields.io/npm/v/pixel-buffer-diff.svg?label=npm+package)](https://www.npmjs.com/package/pixel-buffer-diff) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/pixel-buffer-diff?label=bundle+size)](https://bundlephobia.com/package/pixel-buffer-diff)
+
 **Pbd** is a **Pixel Buffer Diff** library designed for visual regression tests. With zero dependencies and a bundle size under 2kb, **Pbd** works as a drop-in replacement for Pixelmatch and runs 8-10x faster.
@@ -10,2 +13,3 @@
 
+
 ## Usage
@@ -43,3 +47,3 @@
 
-Often times, visual tests run on your Continuous Integration pipeline will run on different machines and show anti-aliasing differences ( small differences along the visible edges in your images ). Using the `threshold` of difference per pixel alone would show even the slightest difference. However **Pbd** returns the `cumulatedDelta`, the sum of threshold difference of every pixel change, to let you discard anti-aliasing changes which amount to 
+Often times, visual tests that run on your Continuous Integration pipeline will run on different machines and show anti-aliasing differences ( small differences along the visible edges in your images ). Using the `threshold` of difference per pixel alone would show even the slightest difference. However **Pbd** returns the `cumulatedDiff`, the sum of threshold difference of every pixel change, to let you discard anti-aliasing changes which amount to 
 
@@ -74,4 +78,4 @@ ## Demo images
   height: number,
-  options?: { threshold?: number; enableMinimap?: boolean }
-): { diff: number; hash: number; cumulatedDelta: number }
+  options?: { threshold?: number; cumulatedThreshold?: number; enableMinimap?: boolean }
+): { diff: number; hash: number; cumulatedDiff: number }
 ```
@@ -82,3 +86,4 @@
 * `options` is an optional argument with the following properties:
-  * `threshold` specifies the matching threshold between `0` and `1`. Smaller values make the comparison more sensitive. Defaults to `0.03` 
+  * `threshold` specifies the individual pixel matching threshold between `0` and `1`. Smaller values make the comparison more sensitive. Defaults to `0.03`
+  * `cumulatedThreshold` specifies the cumulated pixel matching threshold. Smaller values make the comparision more sensitive to anti-aliasing differences. Default to `16`
   *  `enabledMinimap` enables the low resolution overlay. Defaults to `false`
@@ -96,4 +101,4 @@
   diff: ImageData,
-  options?: { threshold?: number, enableMinimap?: boolean,  }
-): { diff: number; hash: number; cumulatedDelta: number }
+  options?: { threshold?: number, cumulatedThreshold?: number; enableMinimap?: boolean,  }
+): { diff: number; hash: number; cumulatedDiff: number }
 ```
@@ -103,3 +108,4 @@
 * `options` is an optional argument with the following properties:
-  * `threshold` specifies the matching threshold between 0 and 1. Smaller values make the comparison more sensitive. Defaults to `0.03` 
+   * `threshold` specifies the individual pixel matching threshold between `0` and `1`. Smaller values make the comparison more sensitive. Defaults to `0.03`
+  * `cumulatedThreshold` specifies the cumulated pixel matching threshold. Smaller values make the comparision more sensitive to anti-aliasing differences. Default to `16`
   *  `enabledMinimap` enables the low resolution overlay. Defaults to `false`
@@ -113,6 +119,8 @@
 * `hash` a numeric hash representing the pixel change between the two images. This hash allows to de-duplicate changes across multiple images to only show unique changes in your visual regression report and approval workflow. 
-* `cumulatedDelta` a number representing the cumulated difference of every pixel change in the two images. This 
+* `cumulatedDiff` a number representing the cumulated difference of every pixel change in the two images. This can used to discard changes that only effect subtle differences like anti-aliasing pixels.
 
+These properties are all set to `0` if the two images are within the cumulatedThreshold.
 
 
+
 ## Example usage
@@ -155,3 +163,3 @@
 // Save the diff if the cumulated delta is significant
-if (result.cumulatedDelta > 16) {
+if (result.cumulatedDiff > 0) {
   fs.writeFileSync("diff.png", fastPng.encode(diffPng as fastPng.IImageData));
@@ -158,0 +166,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

49908857

374675.53%

Number of package files

32

540%

Lines of code

18

12.5%

Number of lines in readme file

162

5.19%

No dependency changes