From c4aed7d279bdd52c2b06fe94e5af799a2f6dd5d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A2=E8=87=B4=E9=82=A6=20=28XIE=20Zhibang=29?= Date: Fri, 14 Feb 2020 18:10:21 +0800 Subject: [PATCH] Fix hShift and vShift MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "--h-shift Acceptable horizontal shift of pixel. (default: 0)" "--v-shift Acceptable vertical shift of pixel. (default: 0)" Signed-off-by: 谢致邦 (XIE Zhibang) --- index.html | 4 ++-- params.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index cd481eb..a4cd223 100644 --- a/index.html +++ b/index.html @@ -235,9 +235,9 @@

  • compareTopToBottom Creates comparison-composition from top to bottom, otherwise it lets decide the app on what is best
  • -hShift Horizontal shift for possible antialiasing (default: 2) Set to 0 to turn this off.
    • +hShift Horizontal shift for possible antialiasing (default: 0)
  • -vShift Vertical shift for possible antialiasing (default: 2) Set to 0 to turn this off.
    • +vShift Vertical shift for possible antialiasing (default: 0)
  • hideShift Uses the background color for "highlighting" shifts. (default: false)
  • diff --git a/params.json b/params.json index 0b2cb75..63dc296 100644 --- a/params.json +++ b/params.json @@ -1 +1 @@ -{"name":"Blink-diff","tagline":"A lightweight image comparison tool","body":"Blink-Diff\r\n==========\r\n\r\nA lightweight image comparison tool\r\n\r\n[![Build Status](https://img.shields.io/travis/yahoo/blink-diff.svg)](http://travis-ci.org/yahoo/blink-diff)\r\n[![Coveralls Coverage](https://img.shields.io/coveralls/yahoo/blink-diff.svg)](https://coveralls.io/r/yahoo/blink-diff)\r\n[![Code Climate Grade](https://img.shields.io/codeclimate/github/yahoo/blink-diff.svg)](https://codeclimate.com/github/yahoo/blink-diff)\r\n\r\n[![NPM version](https://badge.fury.io/js/blink-diff.svg)](https://www.npmjs.com/package/blink-diff)\r\n[![NPM License](https://img.shields.io/npm/l/blink-diff.svg)](https://www.npmjs.com/package/blink-diff)\r\n\r\n[![NPM](https://nodei.co/npm/blink-diff.png?downloads=true&stars=true)](https://www.npmjs.com/package/blink-diff)\r\n[![NPM](https://nodei.co/npm-dl/blink-diff.png?months=3&height=2)](https://www.npmjs.com/package/blink-diff)\r\n\r\n[![Coverage Report](https://img.shields.io/badge/Coverage_Report-Available-blue.svg)](http://yahoo.github.io/blink-diff/coverage/lcov-report/)\r\n[![API Documentation](https://img.shields.io/badge/API_Documentation-Available-blue.svg)](http://yahoo.github.io/blink-diff/docs/)\r\n\r\n[![Gitter Support](https://img.shields.io/badge/Support-Gitter_IM-yellow.svg)](https://gitter.im/preceptorjs/support)\r\n\r\n**Table of Contents**\r\n* [Installation](#installation)\r\n* [Usage](#usage)\r\n * [Command-Line Usage](#command-line-usage)\r\n * [Object Usage](#object-usage)\r\n * [Cropping](#cropping)\r\n * [Perceptual Comparison](#perceptual-comparison)\r\n * [Logging](#logging)\r\n * [Block-Out](#block-out)\r\n* [Examples](#examples)\r\n* [API-Documentation](#api-documentation)\r\n* [Tests](#tests)\r\n* [Project Focus](#project-focus)\r\n* [Project Naming](#project-naming)\r\n* [Contributions](#contributions)\r\n* [Contributors](#contributers)\r\n* [Third-party libraries](#third-party-libraries)\r\n* [License](#license)\r\n\r\n\r\n##Image Comparison and Result\r\n![Composition](https://raw.githubusercontent.com/yahoo/blink-diff/master/images/composition.png)\r\n\r\n##Installation\r\n\r\nInstall this module with the following command:\r\n```shell\r\nnpm install blink-diff\r\n```\r\n\r\nAdd the module to your ```package.json``` dependencies:\r\n```shell\r\nnpm install --save blink-diff\r\n```\r\nAdd the module to your ```package.json``` dev-dependencies:\r\n```shell\r\nnpm install --save-dev blink-diff\r\n```\r\n\r\n##Usage\r\n\r\nThe package can be used in two different ways:\r\n * per command line\r\n * through an object\r\n\r\n###Command-Line usage\r\n\r\nThe command-line tool can be found in the ```bin``` directory. You can run the application with\r\n\r\n```shell\r\nblink-diff --output .png .png .png\r\n```\r\nUse ```image1``` and ```image2``` as the images you want to compare.\r\nOnly PNGs are supported at this point.\r\n\r\n\r\nThe command-line tool exposes a couple of flags and parameters for the comparison:\r\n```\r\n--verbose Turn on verbose mode\r\n--debug Turn on debug mode - leaving all filters and modifications on the result\r\n--threshold p Number of pixels/percent 'p' below which differences are ignored\r\n--threshold-type t 'pixel' and 'percent' as type of threshold. (default: pixel)\r\n--delta p Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)\r\n--copyImageA Copies first image to output as base. (default: true)\r\n--copyImageB Copies second image to output as base.\r\n--no-copy Doesn't copy anything to output as base.\r\n--output o Write difference to the file 'o'\r\n--filter f Filters f (separated with comma) that will be applied before the comparison.\r\n--no-composition Turns the composition feature off\r\n--compose-ltr Compose output image from left to right\r\n--compose-ttb Compose output image from top to bottom\r\n--hide-shift Hides shift highlighting (default: false)\r\n--h-shift Acceptable horizontal shift of pixel. (default: 0)\r\n--v-shift Acceptable vertical shift of pixel. (default: 0)\r\n--block-out x,y,w,h Block-out area. Can be repeated multiple times.\r\n--version Print version\r\n--help This help\r\n```\r\n\r\n\r\n###Object usage\r\n\r\nThe package can also be used directly in code, without going through the command-line.\r\n\r\n**Example:**\r\n```javascript\r\nvar diff = new BlinkDiff({\r\n imageAPath: 'path/to/first/image', // Use file-path\r\n imageBPath: 'path/to/second/image',\r\n\r\n thresholdType: BlinkDiff.THRESHOLD_PERCENT,\r\n threshold: 0.01, // 1% threshold\r\n\r\n imageOutputPath: 'path/to/output/image'\r\n});\r\n\r\ndiff.run(function (error, result) {\r\n if (error) {\r\n throw error;\r\n } else {\r\n console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');\r\n console.log('Found ' + result.differences + ' differences.');\r\n }\r\n});\r\n```\r\n\r\nAll the parameters that were available in the command-line tool are also available through the class constructor, however they might use slightly different wording. The class exposes additional parameters that are not available from the command-line:\r\n* ```imageAPath``` Defines the path to the first image that should be compared (required; imageAPath or imageA is required - see example below)\r\n* ```imageA``` Supplies first image that should be compared (required; imageAPath or imageA is required - see example below) - This can be a PNGImage instance or a Buffer instance with PNG data\r\n* ```imageBPath``` Defines the path to the second image that should be compared (required; imageBPath or imageB is required - see example below)\r\n* ```imageB``` Supplies second image that should be compared (required; imageBPath or imageB is required - see example below) - This can be a PNGImage instance or a Buffer instance with PNG data\r\n* ```imageOutputPath``` Defines the path to the output-file. If you leaves this one off, then this feature is turned-off.\r\n* ```imageOutputLimit``` Defines when an image output should be created. This can be for different images, similar or different images, or all comparisons. (default: BlinkDiff.OUTPUT_ALL)\r\n* ```verbose``` Verbose output (default: false)\r\n* ```thresholdType``` Type of threshold check. This can be BlinkDiff.THRESHOLD_PIXEL and BlinkDiff.THRESHOLD_PERCENT (default: BlinkDiff.THRESHOLD_PIXEL)\r\n* ```threshold``` Number of pixels/percent p below which differences are ignored (default: 500) - For percentage thresholds: 1 = 100%, 0.2 = 20%\r\n* ```delta``` Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference. (default: 20)\r\n* ```outputMaskRed``` Red intensity for the difference highlighting in the output file (default: 255)\r\n* ```outputMaskGreen``` Green intensity for the difference highlighting in the output file (default: 0)\r\n* ```outputMaskBlue``` Blue intensity for the difference highlighting in the output file (default: 0)\r\n* ```outputMaskAlpha``` Alpha intensity for the difference highlighting in the output file (default: 255)\r\n* ```outputMaskOpacity``` Opacity of the pixel for the difference highlighting in the output file (default: 0.7 - slightly transparent)\r\n* ```outputShiftRed``` Red intensity for the shift highlighting in the output file (default: 255)\r\n* ```outputShiftGreen``` Green intensity for the shift highlighting in the output file (default: 165)\r\n* ```outputShiftBlue``` Blue intensity for the shift highlighting in the output file (default: 0)\r\n* ```outputShiftAlpha``` Alpha intensity for the shift highlighting in the output file (default: 255)\r\n* ```outputShiftOpacity``` Opacity of the pixel for the shift highlighting in the output file (default: 0.7 - slightly transparent)\r\n* ```outputBackgroundRed``` Red intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundGreen``` Green intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundBlue``` Blue intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundAlpha``` Alpha intensity for the background in the output file (default: undefined)\r\n* ```outputBackgroundOpacity``` Opacity of the pixel for the background in the output file (default: 0.6 - transparent)\r\n* ```blockOut``` Object or list of objects with coordinates that should be blocked before testing.\r\n* ```blockOutRed``` Red intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutGreen``` Green intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutBlue``` Blue intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutAlpha``` Alpha intensity for the block-out in the output file (default: 255)\r\n* ```blockOutOpacity``` Opacity of the pixel for the block-out in the output file (default: 1.0)\r\n* ```copyImageAToOutput``` Copies the first image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the first image. (default)\r\n* ```copyImageBToOutput``` Copies the second image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the second image.\r\n* ```filter``` Filters that will be applied before the comparison. Available filters are: blur, grayScale, lightness, luma, luminosity, sepia\r\n* ```debug``` When set, then the applied filters will be shown on the output image. (default: false)\r\n* ```createComparison``` Creates a composition of all three images as output (default: true)\r\n* ```compareLeftToRight``` Creates comparison-composition from left to right, otherwise it lets decide the app on what is best\r\n* ```compareTopToBottom``` Creates comparison-composition from top to bottom, otherwise it lets decide the app on what is best\r\n* ```hShift``` Horizontal shift for possible antialiasing (default: 2) Set to 0 to turn this off.\r\n* ```vShift``` Vertical shift for possible antialiasing (default: 2) Set to 0 to turn this off.\r\n* ```hideShift``` Uses the background color for \"highlighting\" shifts. (default: false)\r\n* ```cropImageA``` Cropping for first image (default: no cropping) - Format: { x:, y:, width:, height: }\r\n* ```cropImageB``` Cropping for second image (default: no cropping) - Format: { x:, y:, width:, height: }\r\n* ```perceptual``` Turn the perceptual comparison mode on. See below for more information.\r\n* ```gamma``` Gamma correction for all colors (will be used as base) (default: none) - Any value here will turn the perceptual comparison mode on\r\n* ```gammaR``` Gamma correction for red - Any value here will turn the perceptual comparison mode on\r\n* ```gammaG``` Gamma correction for green - Any value here will turn the perceptual comparison mode on\r\n* ```gammaB``` Gamma correction for blue - Any value here will turn the perceptual comparison mode on\r\n\r\n**Example:**\r\n```javascript\r\nvar firstImage = PNGImage.readImage('path/to/first/image', function (err) {\r\n\r\n if (err) {\r\n throw err;\r\n }\r\n\r\n var diff = new BlinkDiff({\r\n imageA: srcImage, // Use already loaded image for first image\r\n imageBPath: 'path/to/second/image', // Use file-path to select image\r\n\r\n delta: 50, // Make comparison more tolerant\r\n \r\n outputMaskRed: 0,\r\n outputMaskBlue: 255, // Use blue for highlighting differences\r\n \r\n hideShift: true, // Hide anti-aliasing differences - will still determine but not showing it\r\n\r\n imageOutputPath: 'path/to/output/image'\r\n });\r\n\r\n diff.run(function (error, result) {\r\n if (error) {\r\n throw error;\r\n } else {\r\n console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');\r\n console.log('Found ' + result.differences + ' differences.');\r\n }\r\n });\r\n});\r\n```\r\n\r\n####Cropping\r\nImages can be cropped before they are compared by using the ```cropImageA``` or ```cropImageB``` parameters. Single values can be left off, and the system will calculate the correct dimensions. However, ```x```/```y``` coordinates have priority over ```width```/```height``` as the position are usually more important than the dimensions - image will also be clipped by the system when needed.\r\n\r\n####Perceptual Comparison\r\nThe perceptual comparison mode considers the perception of colors in the human brain. It transforms all the colors into a human perception color-space, which is quite different to the typical physical bound RGB color-space. There, in the perceptual color-space, the distance between colors is according to the human perception and should therefore closer resemble the differences a human would perceive seeing the images.\r\n\r\n####Logging\r\n\r\nBy default, the logger doesn't log events anywhere, but you can change this behavior by overwriting ```blinkDiff.log```:\r\n\r\n```javascript\r\nvar blinkDiff = new BlinkDiff({\r\n ...\r\n});\r\n\r\nblinkDiff.log = function (text) {\r\n // Do whatever you want to do\r\n};\r\n\r\n...\r\n```\r\n\r\n####Block-Out\r\nSometimes, it is necessary to block-out some specific areas in an image that should be ignored for comparisons. For example, this can be IDs or even time-labels that change with the time. Adding block-outs to images may decrease false positives and therefore stabilizes these comparisons.\r\n\r\nThe color of the block-outs can be selected by the API parameters. However, the block-out areas will not be visible by default - they are hidden even though they are used. To make them visible, turn the debug-mode on.\r\n\r\n##Examples\r\n\r\nThere are some examples in the ```examples``` folder, in which I used screenshots of YDN to check for visual regressions (and made some manual modifications to the dom to make differences appear ;-)).\r\nYou can find examples for:\r\n* Color changes in ```YDN_Color```\r\n* Missing DOM elements in ```YDN_Missing``` (including some anti-aliasing)\r\n* Multiple differences in ```YDN_Multi```\r\n* Disrupted sorting in ```YDN_Sort```\r\n* Swapped items in ```YDN_Swap``` (including block-out areas)\r\n* Text capitalization in ```YDN_Upper```\r\n\r\nAll screenshots were compared to ```YDN.png```, a previously approved screenshot without a regression.\r\nEach of the regressions has the screenshot and the output result, highlighting the differences.\r\n\r\n##API-Documentation\r\n\r\nGenerate the documentation with following command:\r\n```shell\r\nnpm run docs\r\n```\r\nThe documentation will be generated in the ```docs``` folder of the module root.\r\n\r\n##Tests\r\n\r\nRun the tests with the following command:\r\n```shell\r\nnpm run test\r\n```\r\nThe code-coverage will be written to the ```coverage``` folder in the module root.\r\n\r\n##Project Focus\r\nThere are three types of image comparisons:\r\n* Pixel-by-pixel - Used to compare low-frequency images like screenshots from web-sites, making sure that small styling differences trigger\r\n* Perceptual - Used to compare image creation applications, for example rendering engines and photo manipulation applications that are taking the human perception into account, ignoring differences a human probably would not see\r\n* Context - Used to see if parts of images are missing or are severely distorted, but accepts smaller and/or perceptual differences\r\n\r\nBlink-Diff was initially created to compare screenshots. These images are generally low-frequency, meaning larger areas with the same color and less gradients than in photos. The pixel-by-pixel comparison was chosen as it will trigger for differences that a human might not be able to see. We believe that a bug is still a bug even if a human won't see it - a regression might have happened that wasn't intended.\r\nA perceptual comparison would not trigger small differences, possibly missing problems that could get worse down the road.\r\nPixel-by-pixel comparisons have the reputation of triggering too often, adding manual labor, checking images by hand. Blink-Diff was created to keep this in mind and was optimized to reduce false-positives by taking sub-pixeling and anti-aliasing into account. Additional features like thresholds and the pythagorean distance calculation in the four dimensional color-space makes sure that this won't happen too often. Additionally, filters can be applied to the images, for example to compare luminosity of pixels and not the saturation thereof.\r\nBlink-Diff also supports partially the perceptual comparison that can be turned on when supplying ```perceptual=true```. Then, the colors will be compared in accordance with the human perception and not according to the physical world. High-frequency filters, however, are not yet supported.\r\n\r\n##Project Naming\r\nThe name comes from the [Blink comparator](http://en.wikipedia.org/wiki/Blink_comparator) that was used in Astronomy to recognize differences in multiple photos, taking a picture of the same area in the sky over consecutive days, months, or years. Most notably, it was used to discover Pluto.\r\n\r\n##Contributions\r\nFeel free to create an issue or create a pull-request if you have an idea on how to improve blink-diff. We are pretty relaxed on the contribution rules; add tests for your pull-requests when possible, but it is also ok if there are none - we'll add them for you. We are trying to improve blink-diff as much as possible, and this can only be done by contributions from the community.\r\n\r\nAlso, even if you simply gave us an idea for a feature and did not actually write the code, we will still add you as the Contributor down below since it probably wouldn't be there without you. So, keep them coming!\r\n\r\n##Contributors\r\n* [sarbbottam](https://github.com/sarbbottam)\r\n* [koola](https://github.com/koola)\r\n* [jeffposnick](https://github.com/jeffposnick)\r\n* [a-nwhitmont](https://github.com/a-nwhitmont)\r\n* [azu](https://github.com/azu)\r\n\r\n##Third-party libraries\r\n\r\nThe following third-party libraries are used by this module:\r\n\r\n###Dependencies\r\n* promise: https://github.com/then/promise\r\n* pngjs-image: https://github.com/yahoo/pngjs-image\r\n\r\n###Dev-Dependencies\r\n* chai: http://chaijs.com\r\n* coveralls: https://github.com/cainus/node-coveralls\r\n* codeclimate-test-reporter: https://github.com/codeclimate/javascript-test-reporter\r\n* istanbul: https://github.com/gotwarlost/istanbul\r\n* mocha: https://github.com/visionmedia/mocha\r\n* sinon: http://sinonjs.org\r\n* sinon-chai: https://github.com/domenic/sinon-chai\r\n* yuidocjs: https://github.com/yui/yuidoc\r\n\r\n##License\r\n\r\nThe MIT License\r\n\r\nCopyright 2014-2015 Yahoo Inc.\r\n","google":"UA-56408730-8","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file +{"name":"Blink-diff","tagline":"A lightweight image comparison tool","body":"Blink-Diff\r\n==========\r\n\r\nA lightweight image comparison tool\r\n\r\n[![Build Status](https://img.shields.io/travis/yahoo/blink-diff.svg)](http://travis-ci.org/yahoo/blink-diff)\r\n[![Coveralls Coverage](https://img.shields.io/coveralls/yahoo/blink-diff.svg)](https://coveralls.io/r/yahoo/blink-diff)\r\n[![Code Climate Grade](https://img.shields.io/codeclimate/github/yahoo/blink-diff.svg)](https://codeclimate.com/github/yahoo/blink-diff)\r\n\r\n[![NPM version](https://badge.fury.io/js/blink-diff.svg)](https://www.npmjs.com/package/blink-diff)\r\n[![NPM License](https://img.shields.io/npm/l/blink-diff.svg)](https://www.npmjs.com/package/blink-diff)\r\n\r\n[![NPM](https://nodei.co/npm/blink-diff.png?downloads=true&stars=true)](https://www.npmjs.com/package/blink-diff)\r\n[![NPM](https://nodei.co/npm-dl/blink-diff.png?months=3&height=2)](https://www.npmjs.com/package/blink-diff)\r\n\r\n[![Coverage Report](https://img.shields.io/badge/Coverage_Report-Available-blue.svg)](http://yahoo.github.io/blink-diff/coverage/lcov-report/)\r\n[![API Documentation](https://img.shields.io/badge/API_Documentation-Available-blue.svg)](http://yahoo.github.io/blink-diff/docs/)\r\n\r\n[![Gitter Support](https://img.shields.io/badge/Support-Gitter_IM-yellow.svg)](https://gitter.im/preceptorjs/support)\r\n\r\n**Table of Contents**\r\n* [Installation](#installation)\r\n* [Usage](#usage)\r\n * [Command-Line Usage](#command-line-usage)\r\n * [Object Usage](#object-usage)\r\n * [Cropping](#cropping)\r\n * [Perceptual Comparison](#perceptual-comparison)\r\n * [Logging](#logging)\r\n * [Block-Out](#block-out)\r\n* [Examples](#examples)\r\n* [API-Documentation](#api-documentation)\r\n* [Tests](#tests)\r\n* [Project Focus](#project-focus)\r\n* [Project Naming](#project-naming)\r\n* [Contributions](#contributions)\r\n* [Contributors](#contributers)\r\n* [Third-party libraries](#third-party-libraries)\r\n* [License](#license)\r\n\r\n\r\n##Image Comparison and Result\r\n![Composition](https://raw.githubusercontent.com/yahoo/blink-diff/master/images/composition.png)\r\n\r\n##Installation\r\n\r\nInstall this module with the following command:\r\n```shell\r\nnpm install blink-diff\r\n```\r\n\r\nAdd the module to your ```package.json``` dependencies:\r\n```shell\r\nnpm install --save blink-diff\r\n```\r\nAdd the module to your ```package.json``` dev-dependencies:\r\n```shell\r\nnpm install --save-dev blink-diff\r\n```\r\n\r\n##Usage\r\n\r\nThe package can be used in two different ways:\r\n * per command line\r\n * through an object\r\n\r\n###Command-Line usage\r\n\r\nThe command-line tool can be found in the ```bin``` directory. You can run the application with\r\n\r\n```shell\r\nblink-diff --output .png .png .png\r\n```\r\nUse ```image1``` and ```image2``` as the images you want to compare.\r\nOnly PNGs are supported at this point.\r\n\r\n\r\nThe command-line tool exposes a couple of flags and parameters for the comparison:\r\n```\r\n--verbose Turn on verbose mode\r\n--debug Turn on debug mode - leaving all filters and modifications on the result\r\n--threshold p Number of pixels/percent 'p' below which differences are ignored\r\n--threshold-type t 'pixel' and 'percent' as type of threshold. (default: pixel)\r\n--delta p Max. distance colors in the 4 dimensional color-space without triggering a difference. (default: 20)\r\n--copyImageA Copies first image to output as base. (default: true)\r\n--copyImageB Copies second image to output as base.\r\n--no-copy Doesn't copy anything to output as base.\r\n--output o Write difference to the file 'o'\r\n--filter f Filters f (separated with comma) that will be applied before the comparison.\r\n--no-composition Turns the composition feature off\r\n--compose-ltr Compose output image from left to right\r\n--compose-ttb Compose output image from top to bottom\r\n--hide-shift Hides shift highlighting (default: false)\r\n--h-shift Acceptable horizontal shift of pixel. (default: 0)\r\n--v-shift Acceptable vertical shift of pixel. (default: 0)\r\n--block-out x,y,w,h Block-out area. Can be repeated multiple times.\r\n--version Print version\r\n--help This help\r\n```\r\n\r\n\r\n###Object usage\r\n\r\nThe package can also be used directly in code, without going through the command-line.\r\n\r\n**Example:**\r\n```javascript\r\nvar diff = new BlinkDiff({\r\n imageAPath: 'path/to/first/image', // Use file-path\r\n imageBPath: 'path/to/second/image',\r\n\r\n thresholdType: BlinkDiff.THRESHOLD_PERCENT,\r\n threshold: 0.01, // 1% threshold\r\n\r\n imageOutputPath: 'path/to/output/image'\r\n});\r\n\r\ndiff.run(function (error, result) {\r\n if (error) {\r\n throw error;\r\n } else {\r\n console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');\r\n console.log('Found ' + result.differences + ' differences.');\r\n }\r\n});\r\n```\r\n\r\nAll the parameters that were available in the command-line tool are also available through the class constructor, however they might use slightly different wording. The class exposes additional parameters that are not available from the command-line:\r\n* ```imageAPath``` Defines the path to the first image that should be compared (required; imageAPath or imageA is required - see example below)\r\n* ```imageA``` Supplies first image that should be compared (required; imageAPath or imageA is required - see example below) - This can be a PNGImage instance or a Buffer instance with PNG data\r\n* ```imageBPath``` Defines the path to the second image that should be compared (required; imageBPath or imageB is required - see example below)\r\n* ```imageB``` Supplies second image that should be compared (required; imageBPath or imageB is required - see example below) - This can be a PNGImage instance or a Buffer instance with PNG data\r\n* ```imageOutputPath``` Defines the path to the output-file. If you leaves this one off, then this feature is turned-off.\r\n* ```imageOutputLimit``` Defines when an image output should be created. This can be for different images, similar or different images, or all comparisons. (default: BlinkDiff.OUTPUT_ALL)\r\n* ```verbose``` Verbose output (default: false)\r\n* ```thresholdType``` Type of threshold check. This can be BlinkDiff.THRESHOLD_PIXEL and BlinkDiff.THRESHOLD_PERCENT (default: BlinkDiff.THRESHOLD_PIXEL)\r\n* ```threshold``` Number of pixels/percent p below which differences are ignored (default: 500) - For percentage thresholds: 1 = 100%, 0.2 = 20%\r\n* ```delta``` Distance between the color coordinates in the 4 dimensional color-space that will not trigger a difference. (default: 20)\r\n* ```outputMaskRed``` Red intensity for the difference highlighting in the output file (default: 255)\r\n* ```outputMaskGreen``` Green intensity for the difference highlighting in the output file (default: 0)\r\n* ```outputMaskBlue``` Blue intensity for the difference highlighting in the output file (default: 0)\r\n* ```outputMaskAlpha``` Alpha intensity for the difference highlighting in the output file (default: 255)\r\n* ```outputMaskOpacity``` Opacity of the pixel for the difference highlighting in the output file (default: 0.7 - slightly transparent)\r\n* ```outputShiftRed``` Red intensity for the shift highlighting in the output file (default: 255)\r\n* ```outputShiftGreen``` Green intensity for the shift highlighting in the output file (default: 165)\r\n* ```outputShiftBlue``` Blue intensity for the shift highlighting in the output file (default: 0)\r\n* ```outputShiftAlpha``` Alpha intensity for the shift highlighting in the output file (default: 255)\r\n* ```outputShiftOpacity``` Opacity of the pixel for the shift highlighting in the output file (default: 0.7 - slightly transparent)\r\n* ```outputBackgroundRed``` Red intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundGreen``` Green intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundBlue``` Blue intensity for the background in the output file (default: 0)\r\n* ```outputBackgroundAlpha``` Alpha intensity for the background in the output file (default: undefined)\r\n* ```outputBackgroundOpacity``` Opacity of the pixel for the background in the output file (default: 0.6 - transparent)\r\n* ```blockOut``` Object or list of objects with coordinates that should be blocked before testing.\r\n* ```blockOutRed``` Red intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutGreen``` Green intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutBlue``` Blue intensity for the block-out in the output file (default: 0) This color will only be visible in the result when debug-mode is turned on.\r\n* ```blockOutAlpha``` Alpha intensity for the block-out in the output file (default: 255)\r\n* ```blockOutOpacity``` Opacity of the pixel for the block-out in the output file (default: 1.0)\r\n* ```copyImageAToOutput``` Copies the first image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the first image. (default)\r\n* ```copyImageBToOutput``` Copies the second image to the output image before the comparison begins. This will make sure that the output image will highlight the differences on the second image.\r\n* ```filter``` Filters that will be applied before the comparison. Available filters are: blur, grayScale, lightness, luma, luminosity, sepia\r\n* ```debug``` When set, then the applied filters will be shown on the output image. (default: false)\r\n* ```createComparison``` Creates a composition of all three images as output (default: true)\r\n* ```compareLeftToRight``` Creates comparison-composition from left to right, otherwise it lets decide the app on what is best\r\n* ```compareTopToBottom``` Creates comparison-composition from top to bottom, otherwise it lets decide the app on what is best\r\n* ```hShift``` Horizontal shift for possible antialiasing (default: 0)\r\n* ```vShift``` Vertical shift for possible antialiasing (default: 0)\r\n* ```hideShift``` Uses the background color for \"highlighting\" shifts. (default: false)\r\n* ```cropImageA``` Cropping for first image (default: no cropping) - Format: { x:, y:, width:, height: }\r\n* ```cropImageB``` Cropping for second image (default: no cropping) - Format: { x:, y:, width:, height: }\r\n* ```perceptual``` Turn the perceptual comparison mode on. See below for more information.\r\n* ```gamma``` Gamma correction for all colors (will be used as base) (default: none) - Any value here will turn the perceptual comparison mode on\r\n* ```gammaR``` Gamma correction for red - Any value here will turn the perceptual comparison mode on\r\n* ```gammaG``` Gamma correction for green - Any value here will turn the perceptual comparison mode on\r\n* ```gammaB``` Gamma correction for blue - Any value here will turn the perceptual comparison mode on\r\n\r\n**Example:**\r\n```javascript\r\nvar firstImage = PNGImage.readImage('path/to/first/image', function (err) {\r\n\r\n if (err) {\r\n throw err;\r\n }\r\n\r\n var diff = new BlinkDiff({\r\n imageA: srcImage, // Use already loaded image for first image\r\n imageBPath: 'path/to/second/image', // Use file-path to select image\r\n\r\n delta: 50, // Make comparison more tolerant\r\n \r\n outputMaskRed: 0,\r\n outputMaskBlue: 255, // Use blue for highlighting differences\r\n \r\n hideShift: true, // Hide anti-aliasing differences - will still determine but not showing it\r\n\r\n imageOutputPath: 'path/to/output/image'\r\n });\r\n\r\n diff.run(function (error, result) {\r\n if (error) {\r\n throw error;\r\n } else {\r\n console.log(diff.hasPassed(result.code) ? 'Passed' : 'Failed');\r\n console.log('Found ' + result.differences + ' differences.');\r\n }\r\n });\r\n});\r\n```\r\n\r\n####Cropping\r\nImages can be cropped before they are compared by using the ```cropImageA``` or ```cropImageB``` parameters. Single values can be left off, and the system will calculate the correct dimensions. However, ```x```/```y``` coordinates have priority over ```width```/```height``` as the position are usually more important than the dimensions - image will also be clipped by the system when needed.\r\n\r\n####Perceptual Comparison\r\nThe perceptual comparison mode considers the perception of colors in the human brain. It transforms all the colors into a human perception color-space, which is quite different to the typical physical bound RGB color-space. There, in the perceptual color-space, the distance between colors is according to the human perception and should therefore closer resemble the differences a human would perceive seeing the images.\r\n\r\n####Logging\r\n\r\nBy default, the logger doesn't log events anywhere, but you can change this behavior by overwriting ```blinkDiff.log```:\r\n\r\n```javascript\r\nvar blinkDiff = new BlinkDiff({\r\n ...\r\n});\r\n\r\nblinkDiff.log = function (text) {\r\n // Do whatever you want to do\r\n};\r\n\r\n...\r\n```\r\n\r\n####Block-Out\r\nSometimes, it is necessary to block-out some specific areas in an image that should be ignored for comparisons. For example, this can be IDs or even time-labels that change with the time. Adding block-outs to images may decrease false positives and therefore stabilizes these comparisons.\r\n\r\nThe color of the block-outs can be selected by the API parameters. However, the block-out areas will not be visible by default - they are hidden even though they are used. To make them visible, turn the debug-mode on.\r\n\r\n##Examples\r\n\r\nThere are some examples in the ```examples``` folder, in which I used screenshots of YDN to check for visual regressions (and made some manual modifications to the dom to make differences appear ;-)).\r\nYou can find examples for:\r\n* Color changes in ```YDN_Color```\r\n* Missing DOM elements in ```YDN_Missing``` (including some anti-aliasing)\r\n* Multiple differences in ```YDN_Multi```\r\n* Disrupted sorting in ```YDN_Sort```\r\n* Swapped items in ```YDN_Swap``` (including block-out areas)\r\n* Text capitalization in ```YDN_Upper```\r\n\r\nAll screenshots were compared to ```YDN.png```, a previously approved screenshot without a regression.\r\nEach of the regressions has the screenshot and the output result, highlighting the differences.\r\n\r\n##API-Documentation\r\n\r\nGenerate the documentation with following command:\r\n```shell\r\nnpm run docs\r\n```\r\nThe documentation will be generated in the ```docs``` folder of the module root.\r\n\r\n##Tests\r\n\r\nRun the tests with the following command:\r\n```shell\r\nnpm run test\r\n```\r\nThe code-coverage will be written to the ```coverage``` folder in the module root.\r\n\r\n##Project Focus\r\nThere are three types of image comparisons:\r\n* Pixel-by-pixel - Used to compare low-frequency images like screenshots from web-sites, making sure that small styling differences trigger\r\n* Perceptual - Used to compare image creation applications, for example rendering engines and photo manipulation applications that are taking the human perception into account, ignoring differences a human probably would not see\r\n* Context - Used to see if parts of images are missing or are severely distorted, but accepts smaller and/or perceptual differences\r\n\r\nBlink-Diff was initially created to compare screenshots. These images are generally low-frequency, meaning larger areas with the same color and less gradients than in photos. The pixel-by-pixel comparison was chosen as it will trigger for differences that a human might not be able to see. We believe that a bug is still a bug even if a human won't see it - a regression might have happened that wasn't intended.\r\nA perceptual comparison would not trigger small differences, possibly missing problems that could get worse down the road.\r\nPixel-by-pixel comparisons have the reputation of triggering too often, adding manual labor, checking images by hand. Blink-Diff was created to keep this in mind and was optimized to reduce false-positives by taking sub-pixeling and anti-aliasing into account. Additional features like thresholds and the pythagorean distance calculation in the four dimensional color-space makes sure that this won't happen too often. Additionally, filters can be applied to the images, for example to compare luminosity of pixels and not the saturation thereof.\r\nBlink-Diff also supports partially the perceptual comparison that can be turned on when supplying ```perceptual=true```. Then, the colors will be compared in accordance with the human perception and not according to the physical world. High-frequency filters, however, are not yet supported.\r\n\r\n##Project Naming\r\nThe name comes from the [Blink comparator](http://en.wikipedia.org/wiki/Blink_comparator) that was used in Astronomy to recognize differences in multiple photos, taking a picture of the same area in the sky over consecutive days, months, or years. Most notably, it was used to discover Pluto.\r\n\r\n##Contributions\r\nFeel free to create an issue or create a pull-request if you have an idea on how to improve blink-diff. We are pretty relaxed on the contribution rules; add tests for your pull-requests when possible, but it is also ok if there are none - we'll add them for you. We are trying to improve blink-diff as much as possible, and this can only be done by contributions from the community.\r\n\r\nAlso, even if you simply gave us an idea for a feature and did not actually write the code, we will still add you as the Contributor down below since it probably wouldn't be there without you. So, keep them coming!\r\n\r\n##Contributors\r\n* [sarbbottam](https://github.com/sarbbottam)\r\n* [koola](https://github.com/koola)\r\n* [jeffposnick](https://github.com/jeffposnick)\r\n* [a-nwhitmont](https://github.com/a-nwhitmont)\r\n* [azu](https://github.com/azu)\r\n\r\n##Third-party libraries\r\n\r\nThe following third-party libraries are used by this module:\r\n\r\n###Dependencies\r\n* promise: https://github.com/then/promise\r\n* pngjs-image: https://github.com/yahoo/pngjs-image\r\n\r\n###Dev-Dependencies\r\n* chai: http://chaijs.com\r\n* coveralls: https://github.com/cainus/node-coveralls\r\n* codeclimate-test-reporter: https://github.com/codeclimate/javascript-test-reporter\r\n* istanbul: https://github.com/gotwarlost/istanbul\r\n* mocha: https://github.com/visionmedia/mocha\r\n* sinon: http://sinonjs.org\r\n* sinon-chai: https://github.com/domenic/sinon-chai\r\n* yuidocjs: https://github.com/yui/yuidoc\r\n\r\n##License\r\n\r\nThe MIT License\r\n\r\nCopyright 2014-2015 Yahoo Inc.\r\n","google":"UA-56408730-8","note":"Don't delete this file! It's used internally to help with page regeneration."}