imagediff.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. (function (name, definition) {
  2. var root = this;
  3. if (typeof module !== 'undefined') {
  4. var Canvas;
  5. try {
  6. Canvas = require('canvas');
  7. } catch (e) {}
  8. module.exports = definition(root, name, Canvas);
  9. } else if (typeof define === 'function' && typeof define.amd === 'object') {
  10. define(definition(root, name));
  11. } else {
  12. root[name] = definition(root, name);
  13. }
  14. })('imagediff', function (root, name, Canvas) {
  15. var
  16. TYPE_ARRAY = /\[object Array\]/i,
  17. TYPE_CANVAS = /\[object (Canvas|HTMLCanvasElement)\]/i,
  18. TYPE_CONTEXT = /\[object CanvasRenderingContext2D\]/i,
  19. TYPE_IMAGE = /\[object (Image|HTMLImageElement)\]/i,
  20. TYPE_IMAGE_DATA = /\[object ImageData\]/i,
  21. UNDEFINED = 'undefined',
  22. canvas = getCanvas(),
  23. context = canvas.getContext('2d'),
  24. previous = root[name],
  25. imagediff, jasmine;
  26. // Creation
  27. function getCanvas (width, height) {
  28. var canvas;
  29. if (Canvas) {
  30. canvas = new Canvas();
  31. } else if (root.document && root.document.createElement) {
  32. canvas = document.createElement('canvas');
  33. } else {
  34. throw new Error(
  35. e.message + '\n' +
  36. 'Please see https://github.com/HumbleSoftware/js-imagediff#cannot-find-module-canvas\n'
  37. );
  38. }
  39. if (width) canvas.width = width;
  40. if (height) canvas.height = height;
  41. return canvas;
  42. }
  43. function getImageData (width, height) {
  44. canvas.width = width;
  45. canvas.height = height;
  46. context.clearRect(0, 0, width, height);
  47. return context.createImageData(width, height);
  48. }
  49. // Type Checking
  50. function isImage (object) {
  51. return isType(object, TYPE_IMAGE);
  52. }
  53. function isCanvas (object) {
  54. return isType(object, TYPE_CANVAS);
  55. }
  56. function isContext (object) {
  57. return isType(object, TYPE_CONTEXT);
  58. }
  59. function isImageData (object) {
  60. return !!(object &&
  61. isType(object, TYPE_IMAGE_DATA) &&
  62. typeof(object.width) !== UNDEFINED &&
  63. typeof(object.height) !== UNDEFINED &&
  64. typeof(object.data) !== UNDEFINED);
  65. }
  66. function isImageType (object) {
  67. return (
  68. isImage(object) ||
  69. isCanvas(object) ||
  70. isContext(object) ||
  71. isImageData(object)
  72. );
  73. }
  74. function isType (object, type) {
  75. return typeof (object) === 'object' && !!Object.prototype.toString.apply(object).match(type);
  76. }
  77. // Type Conversion
  78. function copyImageData (imageData) {
  79. var
  80. height = imageData.height,
  81. width = imageData.width,
  82. data = imageData.data,
  83. newImageData, newData, i;
  84. canvas.width = width;
  85. canvas.height = height;
  86. newImageData = context.getImageData(0, 0, width, height);
  87. newData = newImageData.data;
  88. for (i = imageData.data.length; i--;) {
  89. newData[i] = data[i];
  90. }
  91. return newImageData;
  92. }
  93. function toImageData (object) {
  94. if (isImage(object)) { return toImageDataFromImage(object); }
  95. if (isCanvas(object)) { return toImageDataFromCanvas(object); }
  96. if (isContext(object)) { return toImageDataFromContext(object); }
  97. if (isImageData(object)) { return object; }
  98. }
  99. function toImageDataFromImage (image) {
  100. var
  101. height = image.height,
  102. width = image.width;
  103. canvas.width = width;
  104. canvas.height = height;
  105. context.clearRect(0, 0, width, height);
  106. context.drawImage(image, 0, 0);
  107. return context.getImageData(0, 0, width, height);
  108. }
  109. function toImageDataFromCanvas (canvas) {
  110. var
  111. height = canvas.height,
  112. width = canvas.width,
  113. context = canvas.getContext('2d');
  114. return context.getImageData(0, 0, width, height);
  115. }
  116. function toImageDataFromContext (context) {
  117. var
  118. canvas = context.canvas,
  119. height = canvas.height,
  120. width = canvas.width;
  121. return context.getImageData(0, 0, width, height);
  122. }
  123. function toCanvas (object) {
  124. var
  125. data = toImageData(object),
  126. canvas = getCanvas(data.width, data.height),
  127. context = canvas.getContext('2d');
  128. context.putImageData(data, 0, 0);
  129. return canvas;
  130. }
  131. // ImageData Equality Operators
  132. function equalWidth (a, b) {
  133. return a.width === b.width;
  134. }
  135. function equalHeight (a, b) {
  136. return a.height === b.height;
  137. }
  138. function equalDimensions (a, b) {
  139. return equalHeight(a, b) && equalWidth(a, b);
  140. }
  141. function equal (a, b, tolerance) {
  142. var
  143. aData = a.data,
  144. bData = b.data,
  145. length = aData.length,
  146. i;
  147. tolerance = tolerance || 0;
  148. if (!equalDimensions(a, b)) return false;
  149. for (i = length; i--;) if (aData[i] !== bData[i] && Math.abs(aData[i] - bData[i]) > tolerance) return false;
  150. return true;
  151. }
  152. // Diff
  153. function diff (a, b, options) {
  154. return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
  155. }
  156. function diffEqual (a, b, options) {
  157. var
  158. height = a.height,
  159. width = a.width,
  160. c = getImageData(width, height), // c = a - b
  161. aData = a.data,
  162. bData = b.data,
  163. cData = c.data,
  164. length = cData.length,
  165. row, column,
  166. i, j, k, v;
  167. for (i = 0; i < length; i += 4) {
  168. cData[i] = Math.abs(aData[i] - bData[i]);
  169. cData[i+1] = Math.abs(aData[i+1] - bData[i+1]);
  170. cData[i+2] = Math.abs(aData[i+2] - bData[i+2]);
  171. cData[i+3] = Math.abs(255 - Math.abs(aData[i+3] - bData[i+3]));
  172. }
  173. return c;
  174. }
  175. function diffUnequal (a, b, options) {
  176. var
  177. height = Math.max(a.height, b.height),
  178. width = Math.max(a.width, b.width),
  179. c = getImageData(width, height), // c = a - b
  180. aData = a.data,
  181. bData = b.data,
  182. cData = c.data,
  183. align = options && options.align,
  184. rowOffset,
  185. columnOffset,
  186. row, column,
  187. i, j, k, v;
  188. for (i = cData.length - 1; i > 0; i = i - 4) {
  189. cData[i] = 255;
  190. }
  191. // Add First Image
  192. offsets(a);
  193. for (row = a.height; row--;){
  194. for (column = a.width; column--;) {
  195. i = 4 * ((row + rowOffset) * width + (column + columnOffset));
  196. j = 4 * (row * a.width + column);
  197. cData[i+0] = aData[j+0]; // r
  198. cData[i+1] = aData[j+1]; // g
  199. cData[i+2] = aData[j+2]; // b
  200. // cData[i+3] = aData[j+3]; // a
  201. }
  202. }
  203. // Subtract Second Image
  204. offsets(b);
  205. for (row = b.height; row--;){
  206. for (column = b.width; column--;) {
  207. i = 4 * ((row + rowOffset) * width + (column + columnOffset));
  208. j = 4 * (row * b.width + column);
  209. cData[i+0] = Math.abs(cData[i+0] - bData[j+0]); // r
  210. cData[i+1] = Math.abs(cData[i+1] - bData[j+1]); // g
  211. cData[i+2] = Math.abs(cData[i+2] - bData[j+2]); // b
  212. }
  213. }
  214. // Helpers
  215. function offsets (imageData) {
  216. if (align === 'top') {
  217. rowOffset = 0;
  218. columnOffset = 0;
  219. } else {
  220. rowOffset = Math.floor((height - imageData.height) / 2);
  221. columnOffset = Math.floor((width - imageData.width) / 2);
  222. }
  223. }
  224. return c;
  225. }
  226. // Validation
  227. function checkType () {
  228. var i;
  229. for (i = 0; i < arguments.length; i++) {
  230. if (!isImageType(arguments[i])) {
  231. throw {
  232. name : 'ImageTypeError',
  233. message : 'Submitted object was not an image.'
  234. };
  235. }
  236. }
  237. }
  238. // Jasmine Matchers
  239. function get (element, content) {
  240. element = document.createElement(element);
  241. if (element && content) {
  242. element.innerHTML = content;
  243. }
  244. return element;
  245. }
  246. jasmine = {
  247. toBeImageData : function () {
  248. return imagediff.isImageData(this.actual);
  249. },
  250. toImageDiffEqual : function (expected, tolerance) {
  251. if (typeof (document) !== UNDEFINED) {
  252. this.message = function () {
  253. var
  254. div = get('div'),
  255. a = get('div', '<div>Actual:</div>'),
  256. b = get('div', '<div>Expected:</div>'),
  257. c = get('div', '<div>Diff:</div>'),
  258. diff = imagediff.diff(this.actual, expected),
  259. canvas = getCanvas(),
  260. context;
  261. canvas.height = diff.height;
  262. canvas.width = diff.width;
  263. div.style.overflow = 'hidden';
  264. a.style.float = 'left';
  265. b.style.float = 'left';
  266. c.style.float = 'left';
  267. context = canvas.getContext('2d');
  268. context.putImageData(diff, 0, 0);
  269. a.appendChild(toCanvas(this.actual));
  270. b.appendChild(toCanvas(expected));
  271. c.appendChild(canvas);
  272. div.appendChild(a);
  273. div.appendChild(b);
  274. div.appendChild(c);
  275. return [
  276. div,
  277. "Expected not to be equal."
  278. ];
  279. };
  280. }
  281. return imagediff.equal(this.actual, expected, tolerance);
  282. }
  283. };
  284. // Image Output
  285. function imageDataToPNG (imageData, outputFile, callback) {
  286. var
  287. canvas = toCanvas(imageData),
  288. base64Data,
  289. decodedImage;
  290. callback = callback || Function;
  291. base64Data = canvas.toDataURL().replace(/^data:image\/\w+;base64,/,"");
  292. decodedImage = new Buffer(base64Data, 'base64');
  293. require('fs').writeFile(outputFile, decodedImage, callback);
  294. }
  295. // Definition
  296. imagediff = {
  297. createCanvas : getCanvas,
  298. createImageData : getImageData,
  299. isImage : isImage,
  300. isCanvas : isCanvas,
  301. isContext : isContext,
  302. isImageData : isImageData,
  303. isImageType : isImageType,
  304. toImageData : function (object) {
  305. checkType(object);
  306. if (isImageData(object)) { return copyImageData(object); }
  307. return toImageData(object);
  308. },
  309. equal : function (a, b, tolerance) {
  310. checkType(a, b);
  311. a = toImageData(a);
  312. b = toImageData(b);
  313. return equal(a, b, tolerance);
  314. },
  315. diff : function (a, b, options) {
  316. checkType(a, b);
  317. a = toImageData(a);
  318. b = toImageData(b);
  319. return diff(a, b, options);
  320. },
  321. jasmine : jasmine,
  322. // Compatibility
  323. noConflict : function () {
  324. root[name] = previous;
  325. return imagediff;
  326. }
  327. };
  328. if (typeof module !== 'undefined') {
  329. imagediff.imageDataToPNG = imageDataToPNG;
  330. }
  331. return imagediff;
  332. });