Support node-canvas v2 (#81)

Co-authored-by: Luke Childs <[email protected]>

README.md

@@ -102,10 +102,11 @@ Usage in Node.js is the same, however you'll need to also require [node-canvas](
 
 ```js
 const mergeImages = require('merge-images');
-const Canvas = require('canvas');
+const { Canvas, Image } = require('canvas');
 
 mergeImages(['./body.png', './eyes.png', './mouth.png'], {
-  Canvas: Canvas
+  Canvas: Canvas,
+  Image: Image
 })
   .then(b64 => ...);
   // data:image/png;base64,iVBORw0KGgoAA...

package.json

@@ -43,7 +43,7 @@
   "devDependencies": {
     "ava": "^0.25.0",
     "camelcase": "^5.0.0",
-    "canvas": "^1.6.2",
+    "canvas": "^2.6.1",
     "coveralls": "^3.0.0",
     "datauri": "^1.0.5",
     "eslint-config-xo-lukechilds": "^1.0.0",

src/index.js

@@ -14,10 +14,7 @@ const mergeImages = (sources = [], options = {}) => new Promise(resolve => {
 
 	// Setup browser/Node.js specific variables
 	const canvas = options.Canvas ? new options.Canvas() : window.document.createElement('canvas');
-	const Image = options.Canvas ? options.Canvas.Image : window.Image;
-	if (options.Canvas) {
-		options.quality *= 100;
-	}
+	const Image = options.Image || window.Image;
 
 	// Load sources
 	const images = sources.map(source => new Promise((resolve, reject) => {
@@ -53,13 +50,14 @@ const mergeImages = (sources = [], options = {}) => new Promise(resolve => {
 
 			if (options.Canvas && options.format === 'image/jpeg') {
 				// Resolve data URI for node-canvas jpeg async
-				return new Promise(resolve => {
+				return new Promise((resolve, reject) => {
 					canvas.toDataURL(options.format, {
 						quality: options.quality,
 						progressive: false
 					}, (err, jpeg) => {
 						if (err) {
-							throw err;
+							reject(err);
+							return;
 						}
 						resolve(jpeg);
 					});

test/errors.js

@@ -1,5 +1,5 @@
 import test from 'ava';
-import Canvas from 'canvas';
+import { Canvas, Image } from 'canvas';
 import mergeImages from '../';
 
 test('mergeImages rejects Promise if node-canvas instance isn\'t passed in', async t => {
@@ -9,5 +9,5 @@ test('mergeImages rejects Promise if node-canvas instance isn\'t passed in', asy
 
 test('mergeImages rejects Promise if image load errors', async t => {
 	t.plan(1);
-	await t.throws(mergeImages([1], { Canvas }));
+	await t.throws(mergeImages(['nothing-here.jpg'], { Canvas, Image }));
 });

test/types.js

@@ -1,11 +1,11 @@
 import test from 'ava';
-import Canvas from 'canvas';
+import { Canvas, Image } from 'canvas';
 import mergeImages from '../';
 
 test('mergeImages is a function', t => {
 	t.is(typeof mergeImages, 'function');
 });
 
 test('mergeImages returns a Promise', t => {
-	t.true(mergeImages([], { Canvas }) instanceof Promise);
+	t.true(mergeImages([], { Canvas, Image }) instanceof Promise);
 });

test/unit.js

@@ -1,17 +1,17 @@
 import test from 'ava';
-import Canvas from 'canvas';
+import { Canvas, Image } from 'canvas';
 import mergeImages from '../';
 import fixtures from './fixtures';
 
 test('mergeImages returns empty b64 string if nothing is passed in', async t => {
 	t.plan(1);
-	await mergeImages([], { Canvas }).then(b64 => t.true(b64 === 'data:,'));
+	await mergeImages([], { Canvas, Image }).then(b64 => t.true(b64 === 'data:,'));
 });
 
 test('mergeImages returns correct data URI', async t => {
 	t.plan(1);
 	const image = await fixtures.getImage('face.png');
-	const b64 = await mergeImages([image], { Canvas });
+	const b64 = await mergeImages([image], { Canvas, Image });
 
 	const expectedB64 = await fixtures.getDataURI('face.png');
 
@@ -24,7 +24,8 @@ test('mergeImages returns correct data URI', async t => {
 		const image = await fixtures.getImage('face.png');
 		const b64 = await mergeImages([image], {
 			format: `image/${format}`,
-			Canvas
+			Canvas,
+			Image
 		});
 
 		const expectedB64 = await fixtures.getDataURI(`face.${format}`);
@@ -36,7 +37,7 @@ test('mergeImages returns correct data URI', async t => {
 test('mergeImages correctly merges images', async t => {
 	t.plan(1);
 	const images = await Promise.all(['body.png', 'mouth.png', 'eyes.png'].map(image => fixtures.getImage(image)));
-	const b64 = await mergeImages(images, { Canvas });
+	const b64 = await mergeImages(images, { Canvas, Image });
 
 	const expectedB64 = await fixtures.getDataURI('face.png');
 
@@ -49,7 +50,8 @@ test('mergeImages uses custom dimensions', async t => {
 	const b64 = await mergeImages([image], {
 		width: 128,
 		height: 128,
-		Canvas
+		Canvas,
+		Image
 	});
 
 	const expectedB64 = await fixtures.getDataURI('face-custom-dimension.png');
@@ -67,7 +69,7 @@ test('mergeImages uses custom positions', async t => {
 		image.src = src;
 		return image;
 	})));
-	const b64 = await mergeImages(images, { Canvas });
+	const b64 = await mergeImages(images, { Canvas, Image });
 
 	const expectedB64 = await fixtures.getDataURI('face-custom-positions.png');
 
@@ -80,7 +82,8 @@ test('mergeImages uses custom jpeg quality', async t => {
 	const b64 = await mergeImages([image], {
 		format: 'image/jpeg',
 		quality: 0.1,
-		Canvas
+		Canvas,
+		Image
 	});
 
 	const expectedB64 = await fixtures.getDataURI('face-low-quality.jpeg');
@@ -98,7 +101,7 @@ test('mergeImages uses opacity', async t => {
 		image.src = src;
 		return image;
 	})));
-	const b64 = await mergeImages(images, { Canvas });
+	const b64 = await mergeImages(images, { Canvas, Image });
 
 	const expectedB64 = await fixtures.getDataURI('face-opacity.png');