pack images with pngjs

https://www.npmjs.com/package/pngjs
This commit is contained in:
Mike Morris
2015-05-15 16:40:26 -04:00
parent 830a9b3972
commit 7ed3667092
7 changed files with 115 additions and 77 deletions

View File

@@ -5,6 +5,7 @@
var mbgl = require('..');
var fs = require('fs');
var path = require('path');
var PNG = require('pngjs').PNG;
var base = path.join(path.dirname(process.mainModule.filename), '../test');
@@ -20,10 +21,19 @@ fileSource.cancel = function(req) {
var map = new mbgl.Map(fileSource);
map.load(require('../test/fixtures/style.json'));
map.render({}, function(err, image) {
map.render({}, function(err, data) {
if (err) throw err;
mbgl.compressPNG(image, function(err, png) {
fs.writeFileSync('image.png', png);
console.warn('Written image.png');
var png = new PNG({
width: data.width,
height: data.height
});
png.data = data.pixels;
png.pack()
.pipe(fs.createWriteStream('image.png'))
.on('finish', function() {
console.warn('Written image.png');
});
});

View File

@@ -29,9 +29,9 @@
"faucet": "0.0.1",
"mapbox-gl-test-suite": "git://github.com/mapbox/mapbox-gl-test-suite#master",
"mkdirp": "^0.5.1",
"pngjs": "^0.4.0",
"request": "^2.55.0",
"st": "^0.5.3",
"tap-spec": "^3.0.0",
"tape": "^4.0.0"
},
"scripts": {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

@@ -11,6 +11,7 @@ var http = require('http');
var request = require('request');
var st = require('st');
var style = require('../../test/fixtures/style.json');
var PNG = require('pngjs').PNG;
var compare = require('../compare.js');
var dirPath = path.join(path.dirname(require.resolve('../../package.json')), 'test');
@@ -65,28 +66,35 @@ test('gzip', function(t) {
setup(getFileSource(true, t), function(map) {
map.load(style);
map.render({}, function(err, image) {
map.render({}, function(err, data) {
t.error(err);
mbgl.removeAllListeners('message');
mbgl.compressPNG(image, function(err, image) {
t.error(err);
var filename = filePath('success.png');
var filename = filePath('success.png');
if (process.env.UPDATE) {
fs.writeFile(filename.expected, image, function(err) {
t.error(err);
t.end();
});
} else {
fs.writeFile(filename.actual, image, function(err) {
t.error(err);
compare(filename.actual, filename.expected, filename.diff, t, function(error, difference) {
t.ok(difference <= 0.01, 'actual matches expected');
var png = new PNG({
width: data.width,
height: data.height
});
png.data = data.pixels;
if (process.env.UPDATE) {
png.pack()
.pipe(fs.createWriteStream(filename.expected))
.on('finish', t.end);
} else {
png.pack()
.pipe(fs.createWriteStream(filename.actual))
.on('finish', function() {
compare(filename.actual, filename.expected, filename.diff, t, function(err, diff) {
t.error(err);
t.ok(diff <= 0.01, 'actual matches expected');
t.end();
});
});
}
});
}
});
});
});
@@ -108,29 +116,35 @@ test('gzip', function(t) {
setup(getFileSource(false, t), function(map) {
map.load(style);
map.render({}, function(err, image) {
map.render({}, function(err, data) {
if (!errorEmitted) t.fail('no error emitted');
mbgl.removeAllListeners('message');
mbgl.compressPNG(image, function(err, image) {
t.error(err);
var filename = filePath('unhandled.png');
var filename = filePath('unhandled.png');
if (process.env.UPDATE) {
fs.writeFile(filename.expected, image, function(err) {
t.error(err);
t.end();
});
} else {
fs.writeFile(filename.actual, image, function(err) {
t.error(err);
compare(filename.actual, filename.expected, filename.diff, t, function(error, difference) {
t.ok(difference <= 0.001, 'actual matches expected');
var png = new PNG({
width: data.width,
height: data.height
});
png.data = data.pixels;
if (process.env.UPDATE) {
png.pack()
.pipe(fs.createWriteStream(filename.expected))
.on('finish', t.end);
} else {
png.pack()
.pipe(fs.createWriteStream(filename.actual))
.on('finish', function() {
compare(filename.actual, filename.expected, filename.diff, t, function(err, diff) {
t.error(err);
t.ok(diff <= 0.01, 'actual matches expected');
t.end();
});
});
}
});
}
});
});
});

View File

@@ -8,6 +8,7 @@ var fs = require('fs');
var path = require('path');
var mkdirp = require('mkdirp');
var style = require('../fixtures/style.json');
var PNG = require('pngjs').PNG;
var compare = require('../compare.js');
function filePath(name) {
@@ -201,28 +202,33 @@ test('Map', function(t) {
t.test('returns an image', function(t) {
setup(fileSource, function(map) {
map.load(style);
map.render({}, function(err, image) {
map.render({}, function(err, data) {
t.error(err);
mbgl.compressPNG(image, function(err, image) {
t.error(err);
var filename = filePath('image.png');
var filename = filePath('image.png');
if (process.env.UPDATE) {
fs.writeFile(filename.expected, image, function(err) {
t.error(err);
t.end();
});
} else {
fs.writeFile(filename.actual, image, function(err) {
t.error(err);
compare(filename.actual, filename.expected, filename.diff, t, function(error, difference) {
t.ok(difference <= 0.01, 'actual matches expected');
var png = new PNG({
width: data.width,
height: data.height
});
png.data = data.pixels;
if (process.env.UPDATE) {
png.pack()
.pipe(fs.createWriteStream(filename.expected))
.on('finish', t.end);
} else {
png.pack()
.pipe(fs.createWriteStream(filename.actual))
.on('finish', function() {
compare(filename.actual, filename.expected, filename.diff, t, function(err, diff) {
t.error(err);
t.ok(diff <= 0.01, 'actual matches expected');
t.end();
});
});
}
});
}
});
});
});

View File

@@ -7,6 +7,7 @@ var mbgl = require('..');
var fs = require('fs');
var path = require('path');
var mkdirp = require('mkdirp');
var PNG = require('pngjs').PNG;
var compare = require('./compare.js');
var suitePath = path.dirname(require.resolve('mapbox-gl-test-suite/package.json'));
@@ -27,6 +28,8 @@ function format(tmpl, kwargs) {
function renderTest(style, info, base, key) {
var dir = path.join(suitePath, 'tests', base, key);
mkdirp.sync(dir);
return function(t) {
var watchdog = setTimeout(function() {
t.fail('timed out after 20 seconds');
@@ -48,34 +51,40 @@ function renderTest(style, info, base, key) {
var map = new mbgl.Map(fileSource);
map.load(style);
map.render(info[key], function(err, image) {
map.render(info[key], function(err, data) {
t.error(err);
mbgl.compressPNG(image, function(err, image) {
t.error(err);
mkdirp.sync(dir);
var expected = path.join(dir, 'expected.png');
var actual = path.join(dir, 'actual.png');
var diff = path.join(dir, 'diff.png');
var expected = path.join(dir, 'expected.png');
var actual = path.join(dir, 'actual.png');
var diff = path.join(dir, 'diff.png');
if (process.env.UPDATE) {
fs.writeFile(expected, image, function(err) {
t.error(err);
t.end();
});
} else {
fs.writeFile(actual, image, function(err) {
t.error(err);
compare(actual, expected, diff, t, function(error, difference) {
var allowedDifference = ('diff' in info) ? info.diff : 0.001;
var color = difference <= allowedDifference ? 'green' : 'red';
var png = new PNG({
width: data.width,
height: data.height
});
png.data = data.pixels;
if (process.env.UPDATE) {
png.pack()
.pipe(fs.createWriteStream(expected))
.on('finish', t.end);
} else {
png.pack()
.pipe(fs.createWriteStream(actual))
.on('finish', function() {
compare(actual, expected, diff, t, function(err, diff) {
t.error(err);
var allowed = ('diff' in info) ? info.diff : 0.001;
var color = diff <= allowed ? 'green' : 'red';
results += format(resultTemplate, {
name: base,
key: key,
color: color,
error: error ? '<p>' + error + '</p>' : '',
difference: difference,
error: err ? '<p>' + err + '</p>' : '',
difference: diff,
zoom: info.zoom || 0,
center: info.center || [0, 0],
bearing: info.bearing || 0,
@@ -83,12 +92,11 @@ function renderTest(style, info, base, key) {
height: info.height || 512
});
t.ok(difference <= allowedDifference, 'actual matches expected');
t.ok(diff <= allowed, 'actual matches expected');
t.end();
});
});
}
});
});
}
});
};
}