Added masking
This commit is contained in:
parent
288269be8f
commit
61057498a4
8 changed files with 148 additions and 25 deletions
|
@ -82,8 +82,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"space": {
|
"space": [{
|
||||||
"src": "./resources/AstronautHelmet.png",
|
"src": "./resources/AstronautMask.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
|
@ -96,9 +96,47 @@
|
||||||
"offset": 500,
|
"offset": 500,
|
||||||
"size": 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": [
|
"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",
|
"src": "./resources/ComfyTemplate.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
|
@ -163,8 +201,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"snowglobe": {
|
"snowglobe": [{
|
||||||
"src": "./resources/SnowGlobe.png",
|
"src": "./resources/SnowGlobeMask.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
|
@ -174,13 +212,31 @@
|
||||||
},
|
},
|
||||||
"y": {
|
"y": {
|
||||||
"position": 0,
|
"position": 0,
|
||||||
"offset": 20,
|
"offset": 0,
|
||||||
"size": 150
|
"size": 185
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"ice": {
|
"attributes": {
|
||||||
"src": "./resources/IceCube.png",
|
"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/IceCubeMask.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
|
@ -193,8 +249,26 @@
|
||||||
"offset": 128,
|
"offset": 128,
|
||||||
"size": 200
|
"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": [
|
"snowman": [
|
||||||
{
|
{
|
||||||
"src": "./resources/SnowMan.png",
|
"src": "./resources/SnowMan.png",
|
||||||
|
@ -242,8 +316,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"window": {
|
"window": [{
|
||||||
"src": "./resources/WindowTemplate.png",
|
"src": "./resources/WindowMask.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
|
@ -256,11 +330,29 @@
|
||||||
"offset": 64,
|
"offset": 64,
|
||||||
"size": 100
|
"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": [
|
"omegalul": [
|
||||||
{
|
{
|
||||||
"src": "./resources/OmegaLULTemplate.png",
|
"src": "./resources/OmegaLULBackground.png",
|
||||||
"z": 2,
|
"z": 2,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
|
@ -273,6 +365,25 @@
|
||||||
"offset": 64,
|
"offset": 64,
|
||||||
"size": 100
|
"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,
|
"z": 0,
|
||||||
"anchor": {
|
"anchor": {
|
||||||
"x": {
|
"x": {
|
||||||
"position": 50,
|
"position": 0,
|
||||||
"offset": 61,
|
"offset": 0,
|
||||||
"size": 122
|
"size": 122
|
||||||
},
|
},
|
||||||
"y": {
|
"y": {
|
||||||
"position": 50,
|
"position": 0,
|
||||||
"offset": 64,
|
"offset": 0,
|
||||||
"size": 128
|
"size": 128
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
12
imageex.js
12
imageex.js
|
@ -29,18 +29,26 @@ function loadFromUri(uri) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function _drawImage(ctx, img, x, y, args = {}) {
|
function _drawImage(ctx, img, x, y, args = {}) {
|
||||||
if (args.transform) {
|
if (args.transform || args.attributes) {
|
||||||
ctx.save();
|
ctx.save();
|
||||||
|
if (args.transform) {
|
||||||
_.each(args.transform, (val, prop) => {
|
_.each(args.transform, (val, prop) => {
|
||||||
ctx[prop](...val);
|
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) {
|
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);
|
ctx.drawImage(img, args.sx, args.sy, args.swidth, args.sheight, x, y, args.width || args.swidth, args.height || args.sheight);
|
||||||
} else {
|
} else {
|
||||||
ctx.drawImage(img, x, y, args.width, args.height);
|
ctx.drawImage(img, x, y, args.width, args.height);
|
||||||
}
|
}
|
||||||
if (args.transform) {
|
if (args.transform || args.attributes) {
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
8
index.js
8
index.js
|
@ -57,6 +57,7 @@ function render(template, img, size, flipH) {
|
||||||
if (!size.height) imgHeight = imgHeight * size.width / img.width;
|
if (!size.height) imgHeight = imgHeight * size.width / img.width;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('Drawing template: ', template);
|
||||||
const anchor = getNumericAnchor(template.anchor, imgWidth, imgHeight);
|
const anchor = getNumericAnchor(template.anchor, imgWidth, imgHeight);
|
||||||
console.log('Numeric anchor: ', anchor);
|
console.log('Numeric anchor: ', anchor);
|
||||||
const xScale = imgWidth / anchor.x.size;
|
const xScale = imgWidth / anchor.x.size;
|
||||||
|
@ -111,7 +112,8 @@ function render(template, img, size, flipH) {
|
||||||
h: template.image.height * templateScale,
|
h: template.image.height * templateScale,
|
||||||
w: template.image.width * templateScale,
|
w: template.image.width * templateScale,
|
||||||
name: `template ${template.src}`,
|
name: `template ${template.src}`,
|
||||||
flipH
|
flipH,
|
||||||
|
attributes: template.attributes
|
||||||
}].sort((u, v) => u.z > v.z);
|
}].sort((u, v) => u.z > v.z);
|
||||||
|
|
||||||
const canvas = new CanvasEx(resultingWidth, resultingHeight);
|
const canvas = new CanvasEx(resultingWidth, resultingHeight);
|
||||||
|
@ -125,7 +127,9 @@ function render(template, img, size, flipH) {
|
||||||
transform.translate = [resultingWidth, 0];
|
transform.translate = [resultingWidth, 0];
|
||||||
transform.scale = [-1, 1];
|
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) {
|
} catch (err) {
|
||||||
console.error(err);
|
console.error(err);
|
||||||
throw new Error(JSON.stringify({ status: 400, error: 'Invalid template' }));
|
throw new Error(JSON.stringify({ status: 400, error: 'Invalid template' }));
|
||||||
|
|
BIN
resources/AstronautMask.png
Normal file
BIN
resources/AstronautMask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.7 KiB |
BIN
resources/IceCubeMask.png
Normal file
BIN
resources/IceCubeMask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.4 KiB |
BIN
resources/SnowGlobeMask.png
Normal file
BIN
resources/SnowGlobeMask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.5 KiB |
BIN
resources/WindowMask.png
Normal file
BIN
resources/WindowMask.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Reference in a new issue