pack images with pngjs

https://www.npmjs.com/package/pngjs

7 files changed, 117 insertions, 79 deletions

diff --git a/examples/load-from-fs.js b/examples/load-from-fs.js
index 5760f024fd..9337ed8546 100755
--- a/examples/load-from-fs.js
+++ b/examples/load-from-fs.js
@@ -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');
+        });
 });
diff --git a/package.json b/package.json
index e8e2f13fc3..8da4582f67 100644
--- a/package.json
+++ b/package.json
@@ -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": {
diff --git a/test/expected/gzip/success.png b/test/expected/gzip/success.png
index b39617e1f6..de41e0fe2b 100644
--- a/test/expected/gzip/success.png
+++ b/test/expected/gzip/success.png
diff --git a/test/expected/map/image.png b/test/expected/map/image.png
index b39617e1f6..de41e0fe2b 100644
--- a/test/expected/map/image.png
+++ b/test/expected/map/image.png
diff --git a/test/js/gzip.test.js b/test/js/gzip.test.js
index 785c312503..00f827b68a 100644
--- a/test/js/gzip.test.js
+++ b/test/js/gzip.test.js
@@ -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();
                             });
                         });
-                    }
-                });
+                }
             });
         });
     });
diff --git a/test/js/map.test.js b/test/js/map.test.js
index 4222f9e9a9..2d913b40aa 100644
--- a/test/js/map.test.js
+++ b/test/js/map.test.js
@@ -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();
                                 });
                             });
-                        }
-                    });
+                    }
                 });
             });
         });
diff --git a/test/render.test.js b/test/render.test.js
index cb62bf0a96..7249cbb7bc 100644
--- a/test/render.test.js
+++ b/test/render.test.js
@@ -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');
-
-                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 expected = path.join(dir, 'expected.png');
+            var actual = path.join(dir, 'actual.png');
+            var diff = path.join(dir, 'diff.png');
+
+            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();
                         });
-                    });
-                }
-            });
+                });
+            }
         });
     };
 }