Skip to content

Commit

Permalink
use Jimp as fallback when GraphicsMagick isn't installed (#10)
Browse files Browse the repository at this point in the history
  • Loading branch information
zinserjan committed Aug 29, 2016
1 parent f614abc commit 0b5d91c
Show file tree
Hide file tree
Showing 15 changed files with 475 additions and 153 deletions.
12 changes: 9 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,16 @@ node_js:
- "4"
- "5"

env:
global:
- DEBUG=wdio-screenshot:*
matrix:
- GRAPHICSMAGICK=true
- GRAPHICSMAGICK=false

before_install:
- sudo apt-get update
- sudo apt-get install graphicsmagick
- if [ "$GRAPHICSMAGICK" = "true" ] ; then sudo apt-get update && sudo apt-get install graphicsmagick; fi

script:
- npm run test
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "${TRAVIS_NODE_VERSION}" = "4" ]; then npm run test:sauce; fi
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ] && [ "${TRAVIS_NODE_VERSION}" = "4" ] && [ "$GRAPHICSMAGICK" = "true" ]; then npm run test:sauce; fi
41 changes: 23 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,8 @@

## Installation

wdio-screenshot uses [GraphicsMagick](http://www.graphicsmagick.org/) for image processing. To install this
package you'll need to have it preinstalled on your system.

#### Mac OS X using [Homebrew](http://mxcl.github.io/homebrew/)
```sh
$ brew install graphicsmagick
```

#### Ubuntu using apt-get
```sh
$ sudo apt-get install graphicsmagick
```

#### Windows

Download and install executables for [GraphicsMagick](http://www.graphicsmagick.org/download.html).
Please make sure you install the right binaries desired for your system (32bit vs 64bit).

After these dependencies are installed you can install wdio-screenshot via NPM as usual:
Install wdio-screenshot via NPM as usual:

```sh
$ npm install wdio-screenshot --save-dev
Expand All @@ -35,6 +18,8 @@ $ npm install wdio-screenshot --save-dev

Instructions on how to install `WebdriverIO` can be found [here.](http://webdriver.io/guide/getstarted/install.html)

Note: If you want to improve performance, you can [install GraphicsMagick](#use-graphicsmagick).

## Configuration
Setup wdio-screenshot by adding a `wdio-screenshot` key to the plugins section of your WebdriverIO config.

Expand Down Expand Up @@ -72,6 +57,26 @@ available:
* **remove** `String[]`<br>
removes all elements queried by all kinds of different [WebdriverIO selector strategies](http://webdriver.io/guide/usage/selectors.html) (via `display: none`)

## Use GraphicsMagick
wdio-screenshot uses [GraphicsMagick](http://www.graphicsmagick.org/) for image processing when available. Without GraphicsMagick installed, wdio-screenshot fallbacks to [Jimp](https://github.com/oliver-moran/jimp) - a image processing library written in JS.

If you want to install GraphicsMagick, follow the instructions below.

#### Mac OS X using [Homebrew](http://mxcl.github.io/homebrew/)
```sh
$ brew install graphicsmagick
```

#### Ubuntu using apt-get
```sh
$ sudo apt-get install graphicsmagick
```

#### Windows

Download and install executables for [GraphicsMagick](http://www.graphicsmagick.org/download.html).
Please make sure you install the right binaries desired for your system (32bit vs 64bit).


### License

Expand Down
17 changes: 14 additions & 3 deletions appveyor.yml
Original file line number Diff line number Diff line change
@@ -1,16 +1,27 @@
# Test against these versions of Node.js.
environment:
global:
DEBUG: "wdio-screenshot:*"
matrix:
- nodejs_version: "0.12"
GRAPHICSMAGICK: true
- nodejs_version: "0.12"
GRAPHICSMAGICK: false
- nodejs_version: "4"
GRAPHICSMAGICK: true
- nodejs_version: "4"
GRAPHICSMAGICK: false
- nodejs_version: "5"
GRAPHICSMAGICK: true
- nodejs_version: "5"
GRAPHICSMAGICK: false

# Install scripts. (runs after repo cloning)
install:
# Install GraphicsMagick
- appveyor-retry appveyor DownloadFile http://downloads.sourceforge.net/graphicsmagick/GraphicsMagick-1.3.20-Q8-win32-dll.exe
- GraphicsMagick-1.3.20-Q8-win32-dll.exe /SP /VERYSILENT /NORESTART /NOICONS /DIR=%CD%\gm
- set PATH=%CD%\gm;%PATH%
- if %GRAPHICSMAGICK%==true appveyor-retry appveyor DownloadFile http://downloads.sourceforge.net/graphicsmagick/GraphicsMagick-1.3.20-Q8-win32-dll.exe
- if %GRAPHICSMAGICK%==true GraphicsMagick-1.3.20-Q8-win32-dll.exe /SP /VERYSILENT /NORESTART /NOICONS /DIR=%CD%\gm
- if %GRAPHICSMAGICK%==true set PATH=%CD%\gm;%PATH%
# Get the latest stable version of Node 0.STABLE.latest
- ps: Install-Product node $env:nodejs_version
# Typical npm stuff.
Expand Down
6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,9 @@
"debug": "^2.2.0",
"fs-promise": "^0.5.0",
"gm": "^1.22.0",
"node-uuid": "^1.4.7"
"jimp": "^0.2.24",
"node-uuid": "^1.4.7",
"which": "^1.2.10"
},
"devDependencies": {
"babel-cli": "^6.9.0",
Expand All @@ -49,7 +51,9 @@
"chai": "^3.5.0",
"gh-pages": "^0.11.0",
"http-server": "^0.9.0",
"image-size": "^0.5.0",
"mocha": "^2.4.5",
"node-resemble-js": "0.0.5",
"rimraf": "^2.5.2",
"wdio-mocha-framework": "^0.3.2",
"wdio-sauce-service": "^0.2.2",
Expand Down
3 changes: 1 addition & 2 deletions src/modules/makeAreaScreenshot.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import getScreenDimensions from '../scripts/getScreenDimensions';
import virtualScroll from '../scripts/virtualScroll';
import generateUUID from '../utils/generateUUID';
import saveBase64Image from '../utils/saveBase64Image';
import cropImage from '../utils/cropImage';
import mergeImages from '../utils/mergeImages';
import { cropImage, mergeImages } from '../utils/image';

const log = debug('wdio-screenshot:makeAreaScreenshot');
const tmpDir = path.join(__dirname, '..', '..', '.tmp');
Expand Down
28 changes: 0 additions & 28 deletions src/utils/cropImage.js

This file was deleted.

108 changes: 108 additions & 0 deletions src/utils/image/gm.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import gm from 'gm';
import fsExtra from 'fs-promise';
import path from 'path';

import generateUUID from '../generateUUID';
import CropDimension from '../CropDimension';

const tmpDir = path.join(__dirname, '../../../.tmp');


/**
* Crops an image
* @param {string} base64Screenshot image to crop
* @param {CropDimension} cropDimensions dimensions
* @return {string} cropped image
*/
export async function cropImage(base64Screenshot, cropDimensions) {

if (!(cropDimensions instanceof CropDimension )) {
throw new Error('Please provide a valid instance of CropDimension!');
}

const image = gm(new Buffer(base64Screenshot, 'base64'))

if (cropDimensions.getRotation() !== 0) {
image.rotate('white', cropDimensions.getRotation());
}

image.gravity(cropDimensions.getGravity());
image.crop(cropDimensions.getWidth(), cropDimensions.getHeight(), cropDimensions.getX(), cropDimensions.getY());

return new Promise((resolve, reject) => {
image.toBuffer('PNG',function (err, buffer) {
if (err) {
return reject(err);
}
return resolve(buffer.toString('base64'));
})
});
}


/**
* Merges mulidimensional array of images to a single image:
* @param {string[][]} images array of images
* @return {string} screenshot
*/
export async function mergeImages(images) {

const uuid = generateUUID();
const dir = path.join(tmpDir, uuid);

try {
await fsExtra.ensureDir(dir);

// merge all horizintal screens
const rowImagesPromises = images.map(((colImages, key) => {
const firstImage = colImages.shift();
const rowImage = gm(firstImage);

if (colImages.length) {
colImages.push(true);
rowImage.append.apply(rowImage, colImages);
}

return new Promise((resolve, reject) => {
const file = path.join(dir, `${key}.png`);
rowImage.write(file, function (err) {
if (err) {
return reject(err);
}
return resolve(file);
});
});
}));

// merge all vertical screens
const base64Screenshot = await Promise
.all(rowImagesPromises)
.then((rowImages) => {
const firstImage = rowImages.shift();
const mergedImage = gm(firstImage);

if (rowImages.length) {
mergedImage.append.apply(mergedImage, rowImages);
}

return new Promise((resolve, reject) => {
mergedImage.toBuffer('PNG',function (err, buffer) {
if (err) {
return reject(err);
}
return resolve(buffer.toString('base64'));
});
});
});

await fsExtra.remove(dir);
return base64Screenshot;

} catch (e) {
try {
await fsExtra.remove(dir);
} catch(e) {}

throw e;
}
}
16 changes: 16 additions & 0 deletions src/utils/image/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as jimp from './jimp';
import * as gm from './gm';
import which from 'which';
import debug from 'debug';
const log = debug('wdio-screenshot:image');

let gmInstalled = false;

try {
gmInstalled = !!which.sync('gm');
} catch(e) {}

log(`Use image processing library: ${gmInstalled ? 'GraphicsMagick' : 'Jimp'}`);

const { cropImage, mergeImages } = gmInstalled ? gm : jimp;
export { cropImage, mergeImages };
Loading

0 comments on commit 0b5d91c

Please sign in to comment.