https://github.com/ateliee/img-report

CLIでディレクトリ間での画像差分を比較抽出し、HTML形式でレポート表示します。
https://github.com/ateliee/img-report

analysis cli image nodejs reactjs reporting resemblejs

Last synced: 3 months ago
JSON representation

CLIでディレクトリ間での画像差分を比較抽出し、HTML形式でレポート表示します。

• Host: GitHub
• URL: https://github.com/ateliee/img-report
• Owner: ateliee
• License: mit
• Created: 2019-12-08T23:28:56.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:48:59.000Z (over 3 years ago)
• Last Synced: 2025-10-29T23:19:00.009Z (9 months ago)
• Topics: analysis, cli, image, nodejs, reactjs, reporting, resemblejs
• Language: JavaScript
• Homepage: https://ateliee.com/archives/3826
• Size: 9.72 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Image Report



    



[![Build Status](https://travis-ci.com/ateliee/img-report.svg?branch=master)](https://travis-ci.com/ateliee/img-report)

[![Coverage Status](https://coveralls.io/repos/github/ateliee/img-report/badge.svg?branch=master)](https://coveralls.io/github/ateliee/img-report?branch=master)

[![npm version](https://badge.fury.io/js/img-report.svg)](https://badge.fury.io/js/img-report)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/1d6e04a6e034428abe69863e0e78752a)](https://www.codacy.com/manual/ateliee/img-report?utm_source=github.com&utm_medium=referral&utm_content=ateliee/img-report&utm_campaign=Badge_Grade)

![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)

Extract image differences between directories and output HTML reports

## Demo

![](examples/img/screen.png)

[Try Now!](https://ateliee.github.io/img-report/)

## Usage

* Node <= 8.16.2

* [webpack 4.41.2](https://webpack.js.org/)

* [React 16.12.0](https://ja.reactjs.org/)

* [Redux 4.0.4](https://redux-docs.netlify.com/)

* [Resemble.js](https://github.com/rsmbl/Resemble.js)

* [Material-UI](https://material-ui.com/)

### for Development

* [ESlint](https://eslint.org/)

* [Mocha](https://mochajs.org/)

* [Chai.js](https://www.chaijs.com/)

## Install

```

npm install ateliee/img-report --save-dev

```

## Howto

### diff image directory reporting

```

img-report diff ./assets ./dist

# clear ./dist and reporting

img-report diff ./assets ./dist -f

# and reporting html

img-report diff ./assets ./dist -r

# config setting

img-report diff ./assets ./dist -c config.json

```

#### config parameters examples(see Resemble.js)

```

{

  "Resemble": {

    "errorColor": {

      "red": 0,

      "green": 255,

      "blue": 0,

      "alpha": 255

    },

    // flat|movement|flatDifferenceIntensity|movementDifferenceIntensity|diffOnly

    "errorType": "movement",

    "transparency": 0.2,

    "largeImageThreshold": 1200,

    "useCrossOrigin": false,

    "outputDiff": true

  }

}

```

### Output Image Dir Report

```

img-report build -s ./assets/ -d ./dist/

```

create current directory .img-report

### report dev server start

```

img-report serve -s ./assets/ -d ./dist/

```

## For Development

pre-commit lint and unit testing.

### lint

```

npm run-script lint

npm run-script lint:fix

```

### unit test

```

npm test

```

## Exmaple Images

* [Illust AC](https://www.ac-illust.com/)