diff --git a/README.md b/README.md index a60317e..e1e829e 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Images can be overlaid on top of each other and repositioned. The function retur ## Install ```shell -npm install --save merge-images +npm install --save https://github.com/mkhizeryounas/merge-images/tarball/master ``` or for quick testing: diff --git a/src/index.js b/src/index.js index 1d1a724..e9769eb 100644 --- a/src/index.js +++ b/src/index.js @@ -1,72 +1,84 @@ // Defaults const defaultOptions = { - format: 'image/png', - quality: 0.92, - width: undefined, - height: undefined, - Canvas: undefined + format: "image/png", + quality: 0.92, + width: undefined, + height: undefined, + Canvas: undefined }; // Return Promise -const mergeImages = (sources = [], options = {}) => new Promise(resolve => { - options = Object.assign({}, defaultOptions, options); +const mergeImages = (sources = [], options = {}) => + new Promise(resolve => { + options = Object.assign({}, defaultOptions, options); - // 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; - } + // Setup browser/Node.js specific variables + const canvas = options.Canvas + ? new options.Canvas.createCanvas() + : window.document.createElement("canvas"); + const Image = options.Canvas ? options.Canvas.Image : window.Image; + if (options.Canvas) { + options.quality *= 100; + } - // Load sources - const images = sources.map(source => new Promise((resolve, reject) => { - // Convert sources to objects - if (source.constructor.name !== 'Object') { - source = { src: source }; - } + // Load sources + const images = sources.map( + source => + new Promise((resolve, reject) => { + // Convert sources to objects + if (source.constructor.name !== "Object") { + source = { src: source }; + } - // Resolve source and img when loaded - const img = new Image(); - img.onerror = () => reject(new Error('Couldn\'t load image')); - img.onload = () => resolve(Object.assign({}, source, { img })); - img.src = source.src; - })); + // Resolve source and img when loaded + const img = new Image(); + img.onerror = () => reject(new Error("Couldn't load image")); + img.onload = () => resolve(Object.assign({}, source, { img })); + img.src = source.src; + }) + ); - // Get canvas context - const ctx = canvas.getContext('2d'); + // Get canvas context + const ctx = canvas.getContext("2d"); - // When sources have loaded - resolve(Promise.all(images) - .then(images => { - // Set canvas dimensions - const getSize = dim => options[dim] || Math.max(...images.map(image => image.img[dim])); - canvas.width = getSize('width'); - canvas.height = getSize('height'); + // When sources have loaded + resolve( + Promise.all(images).then(images => { + // Set canvas dimensions + const getSize = dim => + options[dim] || Math.max(...images.map(image => image.img[dim])); + canvas.width = getSize("width"); + canvas.height = getSize("height"); - // Draw images to canvas - images.forEach(image => { - ctx.globalAlpha = image.opacity ? image.opacity : 1; - return ctx.drawImage(image.img, image.x || 0, image.y || 0); - }); + // Draw images to canvas + images.forEach(image => { + ctx.globalAlpha = image.opacity ? image.opacity : 1; + return ctx.drawImage(image.img, image.x || 0, image.y || 0); + }); - if (options.Canvas && options.format === 'image/jpeg') { - // Resolve data URI for node-canvas jpeg async - return new Promise(resolve => { - canvas.toDataURL(options.format, { - quality: options.quality, - progressive: false - }, (err, jpeg) => { - if (err) { - throw err; - } - resolve(jpeg); - }); - }); - } + if (options.Canvas && options.format === "image/jpeg") { + // Resolve data URI for node-canvas jpeg async + return new Promise(resolve => { + canvas.toDataURL( + options.format, + { + quality: options.quality, + progressive: false + }, + (err, jpeg) => { + if (err) { + throw err; + } + resolve(jpeg); + } + ); + }); + } - // Resolve all other data URIs sync - return canvas.toDataURL(options.format, options.quality); - })); -}); + // Resolve all other data URIs sync + return canvas.toDataURL(options.format, options.quality); + }) + ); + }); -export default mergeImages; +module.exports = mergeImages;