diff --git a/config.default.json b/config.default.json index fe5335c..3364def 100644 --- a/config.default.json +++ b/config.default.json @@ -82,8 +82,8 @@ } } }, - "space": { - "src": "./resources/AstronautHelmet.png", + "space": [{ + "src": "./resources/AstronautMask.png", "z": 2, "anchor": { "x": { @@ -96,9 +96,47 @@ "offset": 500, "size": 500 } + }, + "attributes": { + "globalCompositeOperation": "destination-in" } }, + { + "src": "./resources/AstronautHelmet.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 600 + }, + "y": { + "position": 0, + "offset": 0, + "size": 565 + } + } + }], "comfy": [ + { + "src": "./resources/ComfyBackground.png", + "z": 2, + "anchor": { + "x":{ + "position":0, + "offset":0, + "size":500 + }, + "y": { + "position": 0, + "offset": 0, + "size": 500 + } + }, + "attributes": { + "globalCompositeOperation": "destination-in" + } + }, { "src": "./resources/ComfyTemplate.png", "z": 2, @@ -163,8 +201,8 @@ } } }, - "snowglobe": { - "src": "./resources/SnowGlobe.png", + "snowglobe": [{ + "src": "./resources/SnowGlobeMask.png", "z": 2, "anchor": { "x": { @@ -174,13 +212,31 @@ }, "y": { "position": 0, - "offset": 20, - "size": 150 + "offset": 0, + "size": 185 + } + }, + "attributes": { + "globalCompositeOperation": "destination-in" + } + },{ + "src": "./resources/SnowGlobe.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 185 + }, + "y": { + "position": 0, + "offset": 0, + "size": 212 } } - }, - "ice": { - "src": "./resources/IceCube.png", + }], + "ice": [{ + "src": "./resources/IceCubeMask.png", "z": 2, "anchor": { "x": { @@ -193,8 +249,26 @@ "offset": 128, "size": 200 } + }, + "attributes": { + "globalCompositeOperation": "destination-in" } - }, + },{ + "src": "./resources/IceCube.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 256 + }, + "y": { + "position": 0, + "offset": 0, + "size": 256 + } + } + }], "snowman": [ { "src": "./resources/SnowMan.png", @@ -242,8 +316,8 @@ } } }, - "window": { - "src": "./resources/WindowTemplate.png", + "window": [{ + "src": "./resources/WindowMask.png", "z": 2, "anchor": { "x": { @@ -256,11 +330,29 @@ "offset": 64, "size": 100 } + }, + "attributes": { + "globalCompositeOperation": "destination-in" } - }, + },{ + "src": "./resources/WindowTemplate.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 128 + }, + "y": { + "position": 0, + "offset": 0, + "size": 128 + } + } + }], "omegalul": [ { - "src": "./resources/OmegaLULTemplate.png", + "src": "./resources/OmegaLULBackground.png", "z": 2, "anchor": { "x": { @@ -273,6 +365,25 @@ "offset": 64, "size": 100 } + }, + "attributes": { + "globalCompositeOperation": "destination-in" + } + }, + { + "src": "./resources/OmegaLULTemplate.png", + "z": 2, + "anchor": { + "x": { + "position": 0, + "offset": 0, + "size": 122 + }, + "y": { + "position": 0, + "offset": 0, + "size": 128 + } } }, { @@ -280,13 +391,13 @@ "z": 0, "anchor": { "x": { - "position": 50, - "offset": 61, + "position": 0, + "offset": 0, "size": 122 }, "y": { - "position": 50, - "offset": 64, + "position": 0, + "offset": 0, "size": 128 } } diff --git a/imageex.js b/imageex.js index bbca81b..851a551 100644 --- a/imageex.js +++ b/imageex.js @@ -29,18 +29,26 @@ function loadFromUri(uri) { } function _drawImage(ctx, img, x, y, args = {}) { - if (args.transform) { + if (args.transform || args.attributes) { ctx.save(); - _.each(args.transform, (val, prop) => { - ctx[prop](...val); - }); + if (args.transform) { + _.each(args.transform, (val, prop) => { + ctx[prop](...val); + }); + } + if (args.attributes) { + _.each(args.attributes, (val, prop) => { + console.log(`Setting ${prop } to ${val}`); + ctx[prop] = val; + }); + } } if (args.sx !== undefined || args.sy !== undefined || args.swidth !== undefined || args.sheight !== undefined) { ctx.drawImage(img, args.sx, args.sy, args.swidth, args.sheight, x, y, args.width || args.swidth, args.height || args.sheight); } else { ctx.drawImage(img, x, y, args.width, args.height); } - if (args.transform) { + if (args.transform || args.attributes) { ctx.restore(); } } diff --git a/index.js b/index.js index a87a906..c452854 100644 --- a/index.js +++ b/index.js @@ -57,6 +57,7 @@ function render(template, img, size, flipH) { if (!size.height) imgHeight = imgHeight * size.width / img.width; } + console.log('Drawing template: ', template); const anchor = getNumericAnchor(template.anchor, imgWidth, imgHeight); console.log('Numeric anchor: ', anchor); const xScale = imgWidth / anchor.x.size; @@ -111,7 +112,8 @@ function render(template, img, size, flipH) { h: template.image.height * templateScale, w: template.image.width * templateScale, name: `template ${template.src}`, - flipH + flipH, + attributes: template.attributes }].sort((u, v) => u.z > v.z); const canvas = new CanvasEx(resultingWidth, resultingHeight); @@ -125,7 +127,9 @@ 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 }); + 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/AstronautMask.png b/resources/AstronautMask.png new file mode 100644 index 0000000..4304a0c Binary files /dev/null and b/resources/AstronautMask.png differ diff --git a/resources/IceCubeMask.png b/resources/IceCubeMask.png new file mode 100644 index 0000000..c7d5067 Binary files /dev/null and b/resources/IceCubeMask.png differ diff --git a/resources/SnowGlobeMask.png b/resources/SnowGlobeMask.png new file mode 100644 index 0000000..225cf06 Binary files /dev/null and b/resources/SnowGlobeMask.png differ diff --git a/resources/WindowMask.png b/resources/WindowMask.png new file mode 100644 index 0000000..d0c0616 Binary files /dev/null and b/resources/WindowMask.png differ diff --git a/resources/WindowTemplate.png b/resources/WindowTemplate.png index f96837b..7223003 100644 Binary files a/resources/WindowTemplate.png and b/resources/WindowTemplate.png differ