diff --git a/config.default.json b/config.default.json index f2a5292..2d8f15a 100644 --- a/config.default.json +++ b/config.default.json @@ -436,6 +436,23 @@ "size": 1200 } } + }, + "pride": { + "src": "./resources/PrideOverlay.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 512 + }, + "y": { + "position": 0, + "offset": 0, + "size": 512 + } + }, + "filter": "pride" } } } diff --git a/filters.js b/filters.js new file mode 100644 index 0000000..be6ab7e --- /dev/null +++ b/filters.js @@ -0,0 +1,31 @@ +const _ = require('lodash'); +const Canvas = require('canvas'); +const { _drawImage } = require('./imageex'); + +const { createCanvas, Image } = Canvas; + +const filters = { + pride: (canvas, source, x, y, props) => { + _.each(canvas.frames, frame => { + const tmpCanvas = createCanvas(frame.canvas.width, frame.canvas.height); + const tmpCtx = tmpCanvas.getContext('2d'); + _drawImage(tmpCtx, frame.canvas, x, y, props); + const multiplyProps = _.extend({}, props, { attributes: { globalCompositeOperation: 'multiply' } }); + _drawImage(tmpCtx, source.frames[0].canvas, x, y, multiplyProps); + + + const tmpCanvas2 = createCanvas(frame.canvas.width, frame.canvas.height); + const tmpCtx2 = tmpCanvas2.getContext('2d'); + _drawImage(tmpCtx2, frame.canvas, x, y, props); + const sourceInProps = _.extend({}, props, { attributes: { globalCompositeOperation: 'source-in' } }); + _drawImage(tmpCtx2, source.frames[0].canvas, x, y, sourceInProps); + + const combineProps2 = _.extend({}, props, { attributes: { globalCompositeOperation: 'source-atop', globalAlpha: 0.9 } }); + _drawImage(frame.ctx, tmpCanvas2, x, y, combineProps2); + const combineProps = _.extend({}, props, { attributes: { globalCompositeOperation: 'source-atop', globalAlpha: 0.8 } }); + _drawImage(frame.ctx, tmpCanvas, x, y, combineProps); + }); + return canvas; + } +}; +module.exports = filters; diff --git a/imageex.js b/imageex.js index 8195641..3c46b22 100644 --- a/imageex.js +++ b/imageex.js @@ -289,5 +289,6 @@ class CanvasEx { module.exports = { CanvasEx, - ImageEx + ImageEx, + _drawImage }; diff --git a/index.js b/index.js index e7e8d32..e35bb33 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,8 @@ const twemoji = require('./twemoji'); const app = express(); const config = require('./config.default.json'); +const filters = require('./filters.js'); + try { _.extend(config, require('./config')); // eslint-disable-line global-require } catch (err) { @@ -113,10 +115,11 @@ function render(template, img, size, flipH) { w: template.image.width * templateScale, name: `template ${template.src}`, flipH, - attributes: template.attributes + attributes: template.attributes, + filter: filters[template.filter] }].sort((u, v) => u.z > v.z); - const canvas = new CanvasEx(resultingWidth, resultingHeight); + let canvas = new CanvasEx(resultingWidth, resultingHeight); for (let i = 0; i < toDraw.length; ++i) { const subject = toDraw[i]; @@ -127,9 +130,15 @@ function render(template, img, size, flipH) { transform.translate = [resultingWidth, 0]; transform.scale = [-1, 1]; } - canvas.drawImage(subject.image, subject.x, subject.y, { - width: subject.w, height: subject.h, transform, attributes: subject.attributes - }); + if (subject.filter) { + canvas = subject.filter(canvas, subject.image, subject.x, subject.y, { + width: subject.w, height: subject.h, transform, attributes: subject.attributes + }); + } else { + canvas.drawImage(subject.image, subject.x, subject.y, { + width: subject.w, height: subject.h, transform, attributes: subject.attributes + }); + } } catch (err) { console.error(err); throw new Error(JSON.stringify({ status: 400, error: 'Invalid template' })); diff --git a/resources/PrideOverlay.png b/resources/PrideOverlay.png new file mode 100644 index 0000000..312afbb Binary files /dev/null and b/resources/PrideOverlay.png differ