Added masking

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
           }
         }

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();
   }
 }

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' }));