imagediff - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

imagediff.js

@@ -176,6 +176,6 @@ // js-imagediff 1.0.3
   // Diff
-  function diff (a, b) {
-    return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b);
+  function diff (a, b, options) {
+    return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
   }
-  function diffEqual (a, b) {
+  function diffEqual (a, b, options) {
 
@@ -197,3 +197,3 @@ var
       cData[i+2] = Math.abs(aData[i+2] - bData[i+2]);
-      cData[i+3] = Math.abs(255 - aData[i+3] - bData[i+3]);
+      cData[i+3] = Math.abs(255 - Math.abs(aData[i+3] - bData[i+3]));
     }
@@ -203,3 +203,3 @@
   }
-  function diffUnequal (a, b) {
+  function diffUnequal (a, b, options) {
 
@@ -213,2 +213,3 @@ var
       cData   = c.data,
+      align   = options && options.align,
       rowOffset,
@@ -251,4 +252,9 @@ columnOffset,
     function offsets (imageData) {
-      rowOffset = Math.floor((height - imageData.height) / 2);
-      columnOffset = Math.floor((width - imageData.width) / 2);
+      if (align === 'top') {
+        rowOffset = 0;
+        columnOffset = 0;
+      } else {
+        rowOffset = Math.floor((height - imageData.height) / 2);
+        columnOffset = Math.floor((width - imageData.width) / 2);
+      }
     }
@@ -373,7 +379,7 @@
     },
-    diff : function (a, b) {
+    diff : function (a, b, options) {
       checkType(a, b);
       a = toImageData(a);
       b = toImageData(b);
-      return diff(a, b);
+      return diff(a, b, options);
     },
@@ -380,0 +386,0 @@

imagediff.min.js

@@ -7,2 +7,2 @@ // js-imagediff 1.0.3
 
-(function(e,t){var n=this;if(typeof module!="undefined"){try{var r=require("canvas")}catch(i){throw new Error(i.message+"\n"+"Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n")}module.exports=t(n,e,r)}else typeof define=="function"&&typeof define.amd=="object"?define(t):n[e]=t(n,e)})("imagediff",function(e,t,n){function d(e,t){var r=n?new n:document.createElement("canvas");return e&&(r.width=e),t&&(r.height=t),r}function v(e,t){return f.width=e,f.height=t,l.clearRect(0,0,e,t),l.createImageData(e,t)}function m(e){return E(e,o)}function g(e){return E(e,i)}function y(e){return E(e,s)}function b(e){return!!e&&!!E(e,u)&&typeof e.width!==a&&typeof e.height!==a&&typeof e.data!==a}function w(e){return m(e)||g(e)||y(e)||b(e)}function E(e,t){return typeof e=="object"&&!!Object.prototype.toString.apply(e).match(t)}function S(e){var t=e.height,n=e.width,r=e.data,i,s,o;f.width=n,f.height=t,i=l.getImageData(0,0,n,t),s=i.data;for(o=e.data.length;o--;)s[o]=r[o];return i}function x(e){if(m(e))return T(e);if(g(e))return N(e);if(y(e))return C(e);if(b(e))return e}function T(e){var t=e.height,n=e.width;return f.width=n,f.height=t,l.clearRect(0,0,n,t),l.drawImage(e,0,0),l.getImageData(0,0,n,t)}function N(e){var t=e.height,n=e.width,r=e.getContext("2d");return r.getImageData(0,0,n,t)}function C(e){var t=e.canvas,n=t.height,r=t.width;return e.getImageData(0,0,r,n)}function k(e){var t=x(e),n=d(t.width,t.height),r=n.getContext("2d");return r.putImageData(t,0,0),n}function L(e,t){return e.width===t.width}function A(e,t){return e.height===t.height}function O(e,t){return A(e,t)&&L(e,t)}function M(e,t,n){var r=e.data,i=t.data,s=r.length,o;n=n||0;if(!O(e,t))return!1;for(o=s;o--;)if(r[o]!==i[o]&&Math.abs(r[o]-i[o])>n)return!1;return!0}function _(e,t){return(O(e,t)?D:P)(e,t)}function D(e,t){var n=e.height,r=e.width,i=v(r,n),s=e.data,o=t.data,u=i.data,a=u.length,f,l,c,h,p,d;for(c=0;c<a;c+=4)u[c]=Math.abs(s[c]-o[c]),u[c+1]=Math.abs(s[c+1]-o[c+1]),u[c+2]=Math.abs(s[c+2]-o[c+2]),u[c+3]=Math.abs(255-s[c+3]-o[c+3]);return i}function P(e,t){function g(e){a=Math.floor((n-e.height)/2),f=Math.floor((r-e.width)/2)}var n=Math.max(e.height,t.height),r=Math.max(e.width,t.width),i=v(r,n),s=e.data,o=t.data,u=i.data,a,f,l,c,h,p,d,m;for(h=u.length-1;h>0;h-=4)u[h]=255;g(e);for(l=e.height;l--;)for(c=e.width;c--;)h=4*((l+a)*r+(c+f)),p=4*(l*e.width+c),u[h+0]=s[p+0],u[h+1]=s[p+1],u[h+2]=s[p+2];g(t);for(l=t.height;l--;)for(c=t.width;c--;)h=4*((l+a)*r+(c+f)),p=4*(l*t.width+c),u[h+0]=Math.abs(u[h+0]-o[p+0]),u[h+1]=Math.abs(u[h+1]-o[p+1]),u[h+2]=Math.abs(u[h+2]-o[p+2]);return i}function H(){var e;for(e=0;e<arguments.length;e++)if(!w(arguments[e]))throw{name:"ImageTypeError",message:"Submitted object was not an image."}}function B(e,t){return e=document.createElement(e),e&&t&&(e.innerHTML=t),e}function j(e,t,n){var r=k(e),i,s;n=n||Function,i=r.toDataURL().replace(/^data:image\/\w+;base64,/,""),s=new Buffer(i,"base64"),require("fs").writeFile(t,s,n)}var r=/\[object Array\]/i,i=/\[object (Canvas|HTMLCanvasElement)\]/i,s=/\[object CanvasRenderingContext2D\]/i,o=/\[object (Image|HTMLImageElement)\]/i,u=/\[object ImageData\]/i,a="undefined",f=d(),l=f.getContext("2d"),c=e[t],h,p;return p={toBeImageData:function(){return h.isImageData(this.actual)},toImageDiffEqual:function(e,t){return typeof document!==a&&(this.message=function(){var t=B("div"),n=B("div","<div>Actual:</div>"),r=B("div","<div>Expected:</div>"),i=B("div","<div>Diff:</div>"),s=h.diff(this.actual,e),o=d(),u;return o.height=s.height,o.width=s.width,t.style.overflow="hidden",n.style.float="left",r.style.float="left",i.style.float="left",u=o.getContext("2d"),u.putImageData(s,0,0),n.appendChild(k(this.actual)),r.appendChild(k(e)),i.appendChild(o),t.appendChild(n),t.appendChild(r),t.appendChild(i),[t,"Expected not to be equal."]}),h.equal(this.actual,e,t)}},h={createCanvas:d,createImageData:v,isImage:m,isCanvas:g,isContext:y,isImageData:b,isImageType:w,toImageData:function(e){return H(e),b(e)?S(e):x(e)},equal:function(e,t,n){return H(e,t),e=x(e),t=x(t),M(e,t,n)},diff:function(e,t){return H(e,t),e=x(e),t=x(t),_(e,t)},jasmine:p,noConflict:function(){return e[t]=c,h}},typeof module!="undefined"&&(h.imageDataToPNG=j),h})
+(function(e,t){var n=this;if(typeof module!="undefined"){try{var r=require("canvas")}catch(i){throw new Error(i.message+"\n"+"Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n")}module.exports=t(n,e,r)}else typeof define=="function"&&typeof define.amd=="object"?define(t):n[e]=t(n,e)})("imagediff",function(e,t,n){function d(e,t){var r=n?new n:document.createElement("canvas");return e&&(r.width=e),t&&(r.height=t),r}function v(e,t){return f.width=e,f.height=t,l.clearRect(0,0,e,t),l.createImageData(e,t)}function m(e){return E(e,o)}function g(e){return E(e,i)}function y(e){return E(e,s)}function b(e){return!!e&&!!E(e,u)&&typeof e.width!==a&&typeof e.height!==a&&typeof e.data!==a}function w(e){return m(e)||g(e)||y(e)||b(e)}function E(e,t){return typeof e=="object"&&!!Object.prototype.toString.apply(e).match(t)}function S(e){var t=e.height,n=e.width,r=e.data,i,s,o;f.width=n,f.height=t,i=l.getImageData(0,0,n,t),s=i.data;for(o=e.data.length;o--;)s[o]=r[o];return i}function x(e){if(m(e))return T(e);if(g(e))return N(e);if(y(e))return C(e);if(b(e))return e}function T(e){var t=e.height,n=e.width;return f.width=n,f.height=t,l.clearRect(0,0,n,t),l.drawImage(e,0,0),l.getImageData(0,0,n,t)}function N(e){var t=e.height,n=e.width,r=e.getContext("2d");return r.getImageData(0,0,n,t)}function C(e){var t=e.canvas,n=t.height,r=t.width;return e.getImageData(0,0,r,n)}function k(e){var t=x(e),n=d(t.width,t.height),r=n.getContext("2d");return r.putImageData(t,0,0),n}function L(e,t){return e.width===t.width}function A(e,t){return e.height===t.height}function O(e,t){return A(e,t)&&L(e,t)}function M(e,t,n){var r=e.data,i=t.data,s=r.length,o;n=n||0;if(!O(e,t))return!1;for(o=s;o--;)if(r[o]!==i[o]&&Math.abs(r[o]-i[o])>n)return!1;return!0}function _(e,t,n){return(O(e,t)?D:P)(e,t,n)}function D(e,t,n){var r=e.height,i=e.width,s=v(i,r),o=e.data,u=t.data,a=s.data,f=a.length,l,c,h,p,d,m;for(h=0;h<f;h+=4)a[h]=Math.abs(o[h]-u[h]),a[h+1]=Math.abs(o[h+1]-u[h+1]),a[h+2]=Math.abs(o[h+2]-u[h+2]),a[h+3]=Math.abs(255-Math.abs(o[h+3]-u[h+3]));return s}function P(e,t,n){function b(e){f==="top"?(l=0,c=0):(l=Math.floor((r-e.height)/2),c=Math.floor((i-e.width)/2))}var r=Math.max(e.height,t.height),i=Math.max(e.width,t.width),s=v(i,r),o=e.data,u=t.data,a=s.data,f=n&&n.align,l,c,h,p,d,m,g,y;for(d=a.length-1;d>0;d-=4)a[d]=255;b(e);for(h=e.height;h--;)for(p=e.width;p--;)d=4*((h+l)*i+(p+c)),m=4*(h*e.width+p),a[d+0]=o[m+0],a[d+1]=o[m+1],a[d+2]=o[m+2];b(t);for(h=t.height;h--;)for(p=t.width;p--;)d=4*((h+l)*i+(p+c)),m=4*(h*t.width+p),a[d+0]=Math.abs(a[d+0]-u[m+0]),a[d+1]=Math.abs(a[d+1]-u[m+1]),a[d+2]=Math.abs(a[d+2]-u[m+2]);return s}function H(){var e;for(e=0;e<arguments.length;e++)if(!w(arguments[e]))throw{name:"ImageTypeError",message:"Submitted object was not an image."}}function B(e,t){return e=document.createElement(e),e&&t&&(e.innerHTML=t),e}function j(e,t,n){var r=k(e),i,s;n=n||Function,i=r.toDataURL().replace(/^data:image\/\w+;base64,/,""),s=new Buffer(i,"base64"),require("fs").writeFile(t,s,n)}var r=/\[object Array\]/i,i=/\[object (Canvas|HTMLCanvasElement)\]/i,s=/\[object CanvasRenderingContext2D\]/i,o=/\[object (Image|HTMLImageElement)\]/i,u=/\[object ImageData\]/i,a="undefined",f=d(),l=f.getContext("2d"),c=e[t],h,p;return p={toBeImageData:function(){return h.isImageData(this.actual)},toImageDiffEqual:function(e,t){return typeof document!==a&&(this.message=function(){var t=B("div"),n=B("div","<div>Actual:</div>"),r=B("div","<div>Expected:</div>"),i=B("div","<div>Diff:</div>"),s=h.diff(this.actual,e),o=d(),u;return o.height=s.height,o.width=s.width,t.style.overflow="hidden",n.style.float="left",r.style.float="left",i.style.float="left",u=o.getContext("2d"),u.putImageData(s,0,0),n.appendChild(k(this.actual)),r.appendChild(k(e)),i.appendChild(o),t.appendChild(n),t.appendChild(r),t.appendChild(i),[t,"Expected not to be equal."]}),h.equal(this.actual,e,t)}},h={createCanvas:d,createImageData:v,isImage:m,isCanvas:g,isContext:y,isImageData:b,isImageType:w,toImageData:function(e){return H(e),b(e)?S(e):x(e)},equal:function(e,t,n){return H(e,t),e=x(e),t=x(t),M(e,t,n)},diff:function(e,t,n){return H(e,t),e=x(e),t=x(t),_(e,t,n)},jasmine:p,noConflict:function(){return e[t]=c,h}},typeof module!="undefined"&&(h.imageDataToPNG=j),h})

js/imagediff.js

@@ -170,6 +170,6 @@ (function (name, definition) {
   // Diff
-  function diff (a, b) {
-    return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b);
+  function diff (a, b, options) {
+    return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
   }
-  function diffEqual (a, b) {
+  function diffEqual (a, b, options) {
 
@@ -191,3 +191,3 @@ var
       cData[i+2] = Math.abs(aData[i+2] - bData[i+2]);
-      cData[i+3] = Math.abs(255 - aData[i+3] - bData[i+3]);
+      cData[i+3] = Math.abs(255 - Math.abs(aData[i+3] - bData[i+3]));
     }
@@ -197,3 +197,3 @@
   }
-  function diffUnequal (a, b) {
+  function diffUnequal (a, b, options) {
 
@@ -207,2 +207,3 @@ var
       cData   = c.data,
+      align   = options && options.align,
       rowOffset,
@@ -245,4 +246,9 @@ columnOffset,
     function offsets (imageData) {
-      rowOffset = Math.floor((height - imageData.height) / 2);
-      columnOffset = Math.floor((width - imageData.width) / 2);
+      if (align === 'top') {
+        rowOffset = 0;
+        columnOffset = 0;
+      } else {
+        rowOffset = Math.floor((height - imageData.height) / 2);
+        columnOffset = Math.floor((width - imageData.width) / 2);
+      }
     }
@@ -367,7 +373,7 @@
     },
-    diff : function (a, b) {
+    diff : function (a, b, options) {
       checkType(a, b);
       a = toImageData(a);
       b = toImageData(b);
-      return diff(a, b);
+      return diff(a, b, options);
     },
@@ -374,0 +380,0 @@

package.json

@@ -30,3 +30,3 @@ {
   },
-  "version": "1.0.5",
+  "version": "1.0.6",
   "engines": {
@@ -33,0 +33,0 @@ "node": ">= 0.6.0"

README.md

@@ -18,3 +18,4 @@ js-imagediff
 * `equal(a, b, tolerance)` tests image type objects for equality; accepts tolerance in pixels.
-* `diff(a, b)` performs an image diff on a and b, returning a - b.
+* `diff(a, b, options)` performs an image diff on a and b, returning a - b.
+  * `options.align` set to `'top'` to top-align the images when diffing different sizes.
 * `noConflict()` removes imagediff from the global space for compatibility, returning imagediff.
@@ -75,2 +76,6 @@ * `imageDataToPNG(imageData, outputFile, [callback])` (node only) renders the imageData to png in outputFile with optional callback.
 ---------
+<h3>1.0.6</h3>
+* Add top-aligned diffing option.
+* Fix issue with diffing transparencies.
+
 <h3>1.0.5</h3>
@@ -77,0 +82,0 @@ * Move canvas to optional dependencies for browserify support.

spec/ImageDiffSpec.js

@@ -313,2 +313,53 @@ var
       });
+
+      it('should calculate difference', function () {
+        a = imagediff.createImageData(1, 1),
+        a.data[1] = 200;
+        b = imagediff.createImageData(1, 1),
+        b.data[1] = 158;
+        c = imagediff.diff(a, b);
+
+        d = imagediff.createImageData(1, 1);
+        d.data[1] = 42;
+        d.data[3] = 255;
+
+        expect(c).toImageDiffEqual(d);
+      });
+
+      it('should center images of unequal size', function () {
+        a = imagediff.createImageData(3, 3),
+        b = imagediff.createImageData(1, 1),
+        b.data[1] = 21;
+        c = imagediff.diff(a, b);
+
+        d = imagediff.createImageData(3, 3);
+        // 4 * (rowPos * imageWidth + columnPos) + rgbPos
+        d.data[4 * (1 * 3 + 1) + 1] = 21;
+        // set alpha
+        Array.prototype.forEach.call(d.data, function (value, i) {
+          if (i % 4 === 3) {
+            d.data[i] = 255;
+          }
+        });
+
+        expect(c).toImageDiffEqual(d);
+      });
+
+      it('should optionally align images top left for unequal size', function () {
+        a = imagediff.createImageData(3, 3),
+        b = imagediff.createImageData(1, 1),
+        b.data[1] = 21;
+        c = imagediff.diff(a, b, {align: 'top'});
+
+        d = imagediff.createImageData(3, 3);
+        d.data[1] = 21;
+        // set alpha
+        Array.prototype.forEach.call(d.data, function (value, i) {
+          if (i % 4 === 3) {
+            d.data[i] = 255;
+          }
+        });
+
+        expect(c).toImageDiffEqual(d);
+      });
     });
@@ -315,0 +366,0 @@

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

287718

increased by0.76%

Lines of code

4178

increased by1.31%

Number of lines in readme file

105

increased by5%

No dependency changes