diff --git a/README.md b/README.md index 936cf75..38ba4cd 100644 --- a/README.md +++ b/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... diff --git a/package.json b/package.json index c2d8598..f5c4ade 100644 --- a/package.json +++ b/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", diff --git a/src/index.js b/src/index.js index f9b576c..1f069d7 100644 --- a/src/index.js +++ b/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); }); diff --git a/test/errors.js b/test/errors.js index 114e404..e6515a7 100644 --- a/test/errors.js +++ b/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 })); }); diff --git a/test/types.js b/test/types.js index 657d1c7..b12cc0c 100644 --- a/test/types.js +++ b/test/types.js @@ -1,5 +1,5 @@ import test from 'ava'; -import Canvas from 'canvas'; +import { Canvas, Image } from 'canvas'; import mergeImages from '../'; test('mergeImages is a function', t => { @@ -7,5 +7,5 @@ test('mergeImages is a function', t => { }); test('mergeImages returns a Promise', t => { - t.true(mergeImages([], { Canvas }) instanceof Promise); + t.true(mergeImages([], { Canvas, Image }) instanceof Promise); }); diff --git a/test/unit.js b/test/unit.js index abbfada..f77c0d5 100644 --- a/test/unit.js +++ b/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');