mirror of
https://github.com/n8n-io/n8n.git
synced 2025-02-21 02:56:40 -08:00
⚡ Add "Multi Step" option to EditImage Node
This commit is contained in:
Jan Oberhauser
parent
5c83be18a8
commit
7826cc06e9
|
|
@ -6,6 +6,7 @@ import {
|
|||
IDataObject,
|
||||
ILoadOptionsFunctions,
|
||||
INodeExecutionData,
|
||||
INodeProperties,
|
||||
INodePropertyOptions,
|
||||
INodeType,
|
||||
INodeTypeDescription,
|
||||
|
|
@ -17,32 +18,14 @@ import {
|
|||
} from 'path';
|
||||
import {
|
||||
writeFile as fsWriteFile,
|
||||
writeFileSync as fsWriteFileSync,
|
||||
} from 'fs';
|
||||
import { promisify } from 'util';
|
||||
const fsWriteFileAsync = promisify(fsWriteFile);
|
||||
import * as getSystemFonts from 'get-system-fonts';
|
||||
|
||||
|
||||
export class EditImage implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
displayName: 'Edit Image',
|
||||
name: 'editImage',
|
||||
icon: 'fa:image',
|
||||
group: ['transform'],
|
||||
version: 1,
|
||||
description: 'Edits an image like blur, resize or adding border and text',
|
||||
defaults: {
|
||||
name: 'Edit Image',
|
||||
color: '#553399',
|
||||
},
|
||||
inputs: ['main'],
|
||||
outputs: ['main'],
|
||||
properties: [
|
||||
{
|
||||
displayName: 'Operation',
|
||||
name: 'operation',
|
||||
type: 'options',
|
||||
options: [
|
||||
const nodeOperations: INodePropertyOptions[] = [
|
||||
{
|
||||
name: 'Blur',
|
||||
value: 'blur',
|
||||
|
|
@ -53,6 +36,11 @@ export class EditImage implements INodeType {
|
|||
value: 'border',
|
||||
description: 'Adds a border to the image',
|
||||
},
|
||||
{
|
||||
name: 'Composite',
|
||||
value: 'composite',
|
||||
description: 'Composite image on top of another one',
|
||||
},
|
||||
{
|
||||
name: 'Create',
|
||||
value: 'create',
|
||||
|
|
@ -63,21 +51,11 @@ export class EditImage implements INodeType {
|
|||
value: 'crop',
|
||||
description: 'Crops the image',
|
||||
},
|
||||
{
|
||||
name: 'Composite',
|
||||
value: 'composite',
|
||||
description: 'Composite image on top of another one',
|
||||
},
|
||||
{
|
||||
name: 'Draw',
|
||||
value: 'draw',
|
||||
description: 'Draw on image',
|
||||
},
|
||||
{
|
||||
name: 'Get Information',
|
||||
value: 'information',
|
||||
description: 'Returns image information like resolution',
|
||||
},
|
||||
{
|
||||
name: 'Rotate',
|
||||
value: 'rotate',
|
||||
|
|
@ -98,19 +76,10 @@ export class EditImage implements INodeType {
|
|||
value: 'text',
|
||||
description: 'Adds text to image',
|
||||
},
|
||||
],
|
||||
default: 'border',
|
||||
description: 'The operation to perform.',
|
||||
},
|
||||
];
|
||||
|
||||
{
|
||||
displayName: 'Property Name',
|
||||
name: 'dataPropertyName',
|
||||
type: 'string',
|
||||
default: 'data',
|
||||
description: 'Name of the binary property in which the image data can be found.',
|
||||
},
|
||||
|
||||
const nodeOperationOptions: INodeProperties[] = [
|
||||
|
||||
// ----------------------------------
|
||||
// create
|
||||
|
|
@ -397,7 +366,6 @@ export class EditImage implements INodeType {
|
|||
description: 'Max amount of characters in a line before a<br />line-break should get added.',
|
||||
},
|
||||
|
||||
|
||||
// ----------------------------------
|
||||
// blur
|
||||
// ----------------------------------
|
||||
|
|
@ -742,7 +710,114 @@ export class EditImage implements INodeType {
|
|||
},
|
||||
description: 'Y (vertical) shear degrees.',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export class EditImage implements INodeType {
|
||||
description: INodeTypeDescription = {
|
||||
displayName: 'Edit Image',
|
||||
name: 'editImage',
|
||||
icon: 'fa:image',
|
||||
group: ['transform'],
|
||||
version: 1,
|
||||
description: 'Edits an image like blur, resize or adding border and text',
|
||||
defaults: {
|
||||
name: 'Edit Image',
|
||||
color: '#553399',
|
||||
},
|
||||
inputs: ['main'],
|
||||
outputs: ['main'],
|
||||
properties: [
|
||||
{
|
||||
displayName: 'Operation',
|
||||
name: 'operation',
|
||||
type: 'options',
|
||||
options: [
|
||||
{
|
||||
name: 'Get Information',
|
||||
value: 'information',
|
||||
description: 'Returns image information like resolution',
|
||||
},
|
||||
{
|
||||
name: 'Multi Step',
|
||||
value: 'multiStep',
|
||||
description: 'Perform multiple operations',
|
||||
},
|
||||
...nodeOperations,
|
||||
].sort((a, b) => {
|
||||
if ((a as INodePropertyOptions).name.toLowerCase() < (b as INodePropertyOptions).name.toLowerCase()) { return -1; }
|
||||
if ((a as INodePropertyOptions).name.toLowerCase() > (b as INodePropertyOptions).name.toLowerCase()) { return 1; }
|
||||
return 0;
|
||||
}) as INodePropertyOptions[],
|
||||
default: 'border',
|
||||
description: 'The operation to perform.',
|
||||
},
|
||||
{
|
||||
displayName: 'Property Name',
|
||||
name: 'dataPropertyName',
|
||||
type: 'string',
|
||||
default: 'data',
|
||||
description: 'Name of the binary property in which the image data can be found.',
|
||||
},
|
||||
|
||||
|
||||
// ----------------------------------
|
||||
// multiStep
|
||||
// ----------------------------------
|
||||
{
|
||||
displayName: 'Operations',
|
||||
name: 'operations',
|
||||
placeholder: 'Add Operation',
|
||||
type: 'fixedCollection',
|
||||
typeOptions: {
|
||||
multipleValues: true,
|
||||
},
|
||||
displayOptions: {
|
||||
show: {
|
||||
operation: [
|
||||
'multiStep',
|
||||
],
|
||||
},
|
||||
},
|
||||
description: 'The operations to perform.',
|
||||
default: {},
|
||||
options: [
|
||||
{
|
||||
name: 'operations',
|
||||
displayName: 'Operations',
|
||||
values: [
|
||||
{
|
||||
displayName: 'Operation',
|
||||
name: 'operation',
|
||||
type: 'options',
|
||||
options: nodeOperations,
|
||||
default: '',
|
||||
description: 'The operation to perform.',
|
||||
},
|
||||
...nodeOperationOptions,
|
||||
{
|
||||
displayName: 'Font',
|
||||
name: 'font',
|
||||
type: 'options',
|
||||
displayOptions: {
|
||||
show: {
|
||||
'operation': [
|
||||
'text',
|
||||
],
|
||||
},
|
||||
},
|
||||
typeOptions: {
|
||||
loadOptionsMethod: 'getFonts',
|
||||
},
|
||||
default: 'default',
|
||||
description: 'The font to use.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
...nodeOperationOptions,
|
||||
{
|
||||
displayName: 'Options',
|
||||
name: 'options',
|
||||
|
|
@ -882,17 +957,91 @@ export class EditImage implements INodeType {
|
|||
|
||||
const options = this.getNodeParameter('options', {}) as IDataObject;
|
||||
|
||||
let gmInstance: gm.State;
|
||||
if (operation === 'create') {
|
||||
const backgroundColor = this.getNodeParameter('backgroundColor') as string;
|
||||
const width = this.getNodeParameter('width') as number;
|
||||
const height = this.getNodeParameter('height') as number;
|
||||
const cleanupFunctions: Array<() => void> = [];
|
||||
|
||||
gmInstance = gm(width, height, backgroundColor);
|
||||
if (!options.format) {
|
||||
options.format = 'png';
|
||||
}
|
||||
let gmInstance: gm.State;
|
||||
|
||||
const requiredOperationParameters: {
|
||||
[key: string]: string[],
|
||||
} = {
|
||||
blur: [
|
||||
'blur',
|
||||
'sigma',
|
||||
],
|
||||
create: [
|
||||
'backgroundColor',
|
||||
'height',
|
||||
'width',
|
||||
],
|
||||
crop: [
|
||||
'height',
|
||||
'positionX',
|
||||
'positionY',
|
||||
'width',
|
||||
],
|
||||
composite: [
|
||||
'dataPropertyNameComposite',
|
||||
'positionX',
|
||||
'positionY',
|
||||
],
|
||||
draw: [
|
||||
'color',
|
||||
'cornerRadius',
|
||||
'endPositionX',
|
||||
'endPositionY',
|
||||
'primitive',
|
||||
'startPositionX',
|
||||
'startPositionY',
|
||||
],
|
||||
information: [],
|
||||
resize: [
|
||||
'height',
|
||||
'resizeOption',
|
||||
'width',
|
||||
],
|
||||
rotate: [
|
||||
'backgroundColor',
|
||||
'rotate',
|
||||
],
|
||||
shear: [
|
||||
'degreesX',
|
||||
'degreesY',
|
||||
],
|
||||
text: [
|
||||
'font',
|
||||
'fontColor',
|
||||
'fontSize',
|
||||
'lineLength',
|
||||
'positionX',
|
||||
'positionY',
|
||||
'text',
|
||||
],
|
||||
};
|
||||
|
||||
let operations: IDataObject[] = [];
|
||||
if (operation === 'multiStep') {
|
||||
// Operation parameters are already in the correct format
|
||||
const operationsData = this.getNodeParameter('operations', { operations: [] }) as IDataObject;
|
||||
operations = operationsData.operations as IDataObject[];
|
||||
} else {
|
||||
// Operation parameters have to first get collected
|
||||
const operationParameters: IDataObject = {};
|
||||
requiredOperationParameters[operation].forEach(parameterName => {
|
||||
try {
|
||||
operationParameters[parameterName] = this.getNodeParameter(parameterName);
|
||||
} catch (e) {}
|
||||
});
|
||||
|
||||
operations = [
|
||||
{
|
||||
operation,
|
||||
...operationParameters,
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
if (operations[0].operation !== 'create') {
|
||||
// "create" generates a new image so does not require any incoming data.
|
||||
if (item.binary === undefined) {
|
||||
throw new Error('Item does not contain any binary data.');
|
||||
}
|
||||
|
|
@ -905,60 +1054,8 @@ export class EditImage implements INodeType {
|
|||
gmInstance = gmInstance.background('transparent');
|
||||
}
|
||||
|
||||
const cleanupFunctions: Array<() => void> = [];
|
||||
|
||||
if (operation === 'blur') {
|
||||
const blur = this.getNodeParameter('blur') as number;
|
||||
const sigma = this.getNodeParameter('sigma') as number;
|
||||
gmInstance = gmInstance.blur(blur, sigma);
|
||||
} else if (operation === 'border') {
|
||||
const borderWidth = this.getNodeParameter('borderWidth') as number;
|
||||
const borderHeight = this.getNodeParameter('borderHeight') as number;
|
||||
const borderColor = this.getNodeParameter('borderColor') as string;
|
||||
|
||||
gmInstance = gmInstance.borderColor(borderColor).border(borderWidth, borderHeight);
|
||||
} else if (operation === 'composite') {
|
||||
const dataPropertyNameComposite = this.getNodeParameter('dataPropertyNameComposite') as string;
|
||||
const positionX = this.getNodeParameter('positionX') as number;
|
||||
const positionY = this.getNodeParameter('positionY') as number;
|
||||
|
||||
const geometryString = (positionX >= 0 ? '+' : '') + positionX + (positionY >= 0 ? '+' : '') + positionY;
|
||||
|
||||
if (item.binary![dataPropertyNameComposite as string] === undefined) {
|
||||
throw new Error(`Item does not contain any binary data with the name "${dataPropertyNameComposite}".`);
|
||||
}
|
||||
|
||||
const { fd, path, cleanup } = await file();
|
||||
cleanupFunctions.push(cleanup);
|
||||
fsWriteFileAsync(fd, Buffer.from(item.binary![dataPropertyNameComposite as string].data, BINARY_ENCODING));
|
||||
|
||||
gmInstance = gmInstance.composite(path).geometry(geometryString);
|
||||
} else if (operation === 'crop') {
|
||||
const width = this.getNodeParameter('width') as number;
|
||||
const height = this.getNodeParameter('height') as number;
|
||||
|
||||
const positionX = this.getNodeParameter('positionX') as number;
|
||||
const positionY = this.getNodeParameter('positionY') as number;
|
||||
|
||||
gmInstance = gmInstance.crop(width, height, positionX, positionY);
|
||||
} else if (operation === 'draw') {
|
||||
const startPositionX = this.getNodeParameter('startPositionX') as number;
|
||||
const startPositionY = this.getNodeParameter('startPositionY') as number;
|
||||
const endPositionX = this.getNodeParameter('endPositionX') as number;
|
||||
const endPositionY = this.getNodeParameter('endPositionY') as number;
|
||||
const primitive = this.getNodeParameter('primitive') as string;
|
||||
const color = this.getNodeParameter('color') as string;
|
||||
|
||||
gmInstance = gmInstance.fill(color);
|
||||
|
||||
if (primitive === 'line') {
|
||||
gmInstance = gmInstance.drawLine(startPositionX, startPositionY, endPositionX, endPositionY);
|
||||
} else if (primitive === 'rectangle') {
|
||||
const cornerRadius = this.getNodeParameter('cornerRadius') as number;
|
||||
gmInstance = gmInstance.drawRectangle(startPositionX, startPositionY, endPositionX, endPositionY, cornerRadius || undefined);
|
||||
}
|
||||
|
||||
} else if (operation === 'information') {
|
||||
if (operation === 'information') {
|
||||
// Just return the information
|
||||
const imageData = await new Promise<IDataObject>((resolve, reject) => {
|
||||
gmInstance = gmInstance.identify((error, imageData) => {
|
||||
if (error) {
|
||||
|
|
@ -970,10 +1067,47 @@ export class EditImage implements INodeType {
|
|||
});
|
||||
|
||||
item.json = imageData;
|
||||
} else if (operation === 'resize') {
|
||||
const width = this.getNodeParameter('width') as number;
|
||||
const height = this.getNodeParameter('height') as number;
|
||||
const resizeOption = this.getNodeParameter('resizeOption') as string;
|
||||
return item;
|
||||
}
|
||||
|
||||
for (const operationData of operations) {
|
||||
if (operationData.operation === 'blur') {
|
||||
gmInstance = gmInstance!.blur(operationData.blur as number, operationData.sigma as number);
|
||||
} else if (operationData.operation === 'border') {
|
||||
gmInstance = gmInstance!.borderColor(operationData.borderColor as string).border(operationData.borderWidth as number, operationData.borderHeight as number);
|
||||
} else if (operationData.operation === 'composite') {
|
||||
const positionX = operationData.positionX as number;
|
||||
const positionY = operationData.positionY as number;
|
||||
|
||||
const geometryString = (positionX >= 0 ? '+' : '') + positionX + (positionY >= 0 ? '+' : '') + positionY;
|
||||
|
||||
if (item.binary![operationData.dataPropertyNameComposite as string] === undefined) {
|
||||
throw new Error(`Item does not contain any binary data with the name "${operationData.dataPropertyNameComposite}".`);
|
||||
}
|
||||
|
||||
gmInstance = await gmInstance!;
|
||||
const { fd, path, cleanup } = await file();
|
||||
cleanupFunctions.push(cleanup);
|
||||
await fsWriteFileAsync(fd, Buffer.from(item.binary![operationData.dataPropertyNameComposite as string].data, BINARY_ENCODING));
|
||||
|
||||
gmInstance = gmInstance!.composite(path).geometry(geometryString);
|
||||
} else if (operationData.operation === 'create') {
|
||||
gmInstance = gm(operationData.width as number, operationData.height as number, operationData.backgroundColor as string);
|
||||
if (!options.format) {
|
||||
options.format = 'png';
|
||||
}
|
||||
} else if (operationData.operation === 'crop') {
|
||||
gmInstance = gmInstance!.crop(operationData.width as number, operationData.height as number, operationData.positionX as number, operationData.positionY as number);
|
||||
} else if (operationData.operation === 'draw') {
|
||||
gmInstance = gmInstance!.fill(operationData.color as string);
|
||||
|
||||
if (operationData.primitive === 'line') {
|
||||
gmInstance = gmInstance.drawLine(operationData.startPositionX as number, operationData.startPositionY as number, operationData.endPositionX as number, operationData.endPositionY as number);
|
||||
} else if (operationData.primitive === 'rectangle') {
|
||||
gmInstance = gmInstance.drawRectangle(operationData.startPositionX as number, operationData.startPositionY as number, operationData.endPositionX as number, operationData.endPositionY as number, operationData.cornerRadius as number || undefined);
|
||||
}
|
||||
} else if (operationData.operation === 'resize') {
|
||||
const resizeOption = operationData.resizeOption as string;
|
||||
|
||||
// By default use "maximumArea"
|
||||
let option: gm.ResizeOption = '@';
|
||||
|
|
@ -989,29 +1123,18 @@ export class EditImage implements INodeType {
|
|||
option = '%';
|
||||
}
|
||||
|
||||
gmInstance = gmInstance.resize(width, height, option);
|
||||
} else if (operation === 'rotate') {
|
||||
const rotate = this.getNodeParameter('rotate') as number;
|
||||
const backgroundColor = this.getNodeParameter('backgroundColor') as string;
|
||||
gmInstance = gmInstance.rotate(backgroundColor, rotate);
|
||||
} else if (operation === 'shear') {
|
||||
const xDegrees = this.getNodeParameter('degreesX') as number;
|
||||
const yDegress = this.getNodeParameter('degreesY') as number;
|
||||
gmInstance = gmInstance.shear(xDegrees, yDegress);
|
||||
} else if (operation === 'text') {
|
||||
const fontColor = this.getNodeParameter('fontColor') as string;
|
||||
const fontSize = this.getNodeParameter('fontSize') as number;
|
||||
const lineLength = this.getNodeParameter('lineLength') as number;
|
||||
const positionX = this.getNodeParameter('positionX') as number;
|
||||
const positionY = this.getNodeParameter('positionY') as number;
|
||||
const text = this.getNodeParameter('text') as string || '';
|
||||
|
||||
gmInstance = gmInstance!.resize(operationData.width as number, operationData.height as number, option);
|
||||
} else if (operationData.operation === 'rotate') {
|
||||
gmInstance = gmInstance!.rotate(operationData.backgroundColor as string, operationData.rotate as number);
|
||||
} else if (operationData.operation === 'shear') {
|
||||
gmInstance = gmInstance!.shear(operationData.degreesX as number, operationData.degreesY as number);
|
||||
} else if (operationData.operation === 'text') {
|
||||
// Split the text in multiple lines
|
||||
const lines: string[] = [];
|
||||
let currentLine = '';
|
||||
(text as string).split('\n').forEach((textLine: string) => {
|
||||
(operationData.text as string).split('\n').forEach((textLine: string) => {
|
||||
textLine.split(' ').forEach((textPart: string) => {
|
||||
if ((currentLine.length + textPart.length + 1) > lineLength) {
|
||||
if ((currentLine.length + textPart.length + 1) > (operationData.lineLength as number)) {
|
||||
lines.push(currentLine.trim());
|
||||
currentLine = `${textPart} `;
|
||||
return;
|
||||
|
|
@ -1026,16 +1149,17 @@ export class EditImage implements INodeType {
|
|||
// Combine the lines to a single string
|
||||
const renderText = lines.join('\n');
|
||||
|
||||
if (options.font && options.font !== 'default') {
|
||||
gmInstance = gmInstance.font(options.font as string);
|
||||
const font = options.font || operationData.font;
|
||||
|
||||
if (font && font !== 'default') {
|
||||
gmInstance = gmInstance!.font(font as string);
|
||||
}
|
||||
|
||||
gmInstance = gmInstance
|
||||
.fill(fontColor)
|
||||
.fontSize(fontSize)
|
||||
.drawText(positionX, positionY, renderText);
|
||||
} else if (operation !== 'create') {
|
||||
throw new Error(`The operation "${operation}" is not supported!`);
|
||||
gmInstance = gmInstance!
|
||||
.fill(operationData.fontColor as string)
|
||||
.fontSize(operationData.fontSize as number)
|
||||
.drawText(operationData.positionX as number, operationData.positionY as number, renderText);
|
||||
}
|
||||
}
|
||||
|
||||
const newItem: INodeExecutionData = {
|
||||
|
|
@ -1060,11 +1184,11 @@ export class EditImage implements INodeType {
|
|||
}
|
||||
|
||||
if (options.quality !== undefined) {
|
||||
gmInstance = gmInstance.quality(options.quality as number);
|
||||
gmInstance = gmInstance!.quality(options.quality as number);
|
||||
}
|
||||
|
||||
if (options.format !== undefined) {
|
||||
gmInstance = gmInstance.setFormat(options.format as string);
|
||||
gmInstance = gmInstance!.setFormat(options.format as string);
|
||||
newItem.binary![dataPropertyName as string].fileExtension = options.format as string;
|
||||
newItem.binary![dataPropertyName as string].mimeType = `image/${options.format}`;
|
||||
const fileName = newItem.binary![dataPropertyName as string].fileName;
|
||||
|
|
|
|||
Loading…
Reference in a new issue