xpict 0.0.1

package/README.md

@@ -0,0 +1 @@
+# Xpict: Generation of standardized images from predefined templates and functions

package/dev-scripts/generate-exports.cjs

@@ -0,0 +1,57 @@
+const fs = require("fs")
+const path = require("path")
+
+const distPath = path.join(__dirname, "..", "src")
+
+const packageJsonPath = path.join(__dirname, "..", "package.json")
+const packageJson = require(packageJsonPath)
+
+function generateExports(dir, base = "") {
+    const entries = fs.readdirSync(dir)
+    let exports = {}
+
+    entries.forEach(entry => {
+        const fullPath = path.join(dir, entry)
+        const stat = fs.statSync(fullPath)
+
+        if (stat.isDirectory()) {
+            exports = {
+                ...exports,
+                ...generateExports(fullPath, `${base}/${entry}`)
+            }
+        } else if (path.extname(entry) === ".ts") {
+            const exportPath = `${base}/${entry.replace(".ts", "")}`
+
+            const cjsPath = `./dist/cjs${exportPath}.js`
+            const esmPath = `./dist/esm${exportPath}.js`
+            const dtsPath = `./dist/types${exportPath}.d.ts`
+
+            if (exportPath !== "/index") {
+                exports[`.${exportPath.replace("/index", "")}`] = {
+                    import: esmPath,
+                    require: cjsPath,
+                    default: esmPath,
+                    types: dtsPath
+                }
+            }
+        }
+    })
+
+    return exports
+}
+
+const generatedExports = generateExports(distPath)
+
+packageJson.exports = {
+    ".": {
+        import: "./dist/index.js",
+        require: "./dist/index.js",
+        default: "./dist/index.js",
+        types: "./dist/index.d.ts",
+    },
+    ...generatedExports
+}
+
+fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
+
+console.log("Exports gerados e adicionados ao package.json")

package/dev-scripts/index.ts

@@ -0,0 +1,149 @@
+// import fakeUa from "fake-useragent"
+
+
+// import { extractInnerText, ParsingModel, PuppeteerClient, PuppeteerClientAction } from "../src"
+
+// const randomizeViewportSize: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         const width = 1920 + Math.floor(Math.random() * 100)
+//         const height = 3000 + Math.floor(Math.random() * 100)
+
+//         await page.setViewport({
+//             width: width,
+//             height: height,
+//             deviceScaleFactor: 1,
+//             hasTouch: false,
+//             isLandscape: false,
+//             isMobile: false,
+//         })
+//     }
+// }
+
+// const skipAssetsLoading: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.setRequestInterception(true)
+
+//         page.on("request", async (request) => {
+//             const isAssets = (
+//                 request.resourceType() == "stylesheet" ||
+//                 request.resourceType() == "font" ||
+//                 request.resourceType() == "image"
+//             )
+
+//             if (isAssets) {
+//                 await request.abort()
+//             } else {
+//                 await request.continue()
+//             }
+//         })
+//     }
+// }
+
+// const passWebdriverCheck: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             Object.defineProperty(navigator, "webdriver", {
+//                 get: () => false
+//             })
+//         })
+//     }
+// }
+
+// const passChromeCheck: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             (window as any).chrome = {
+//                 runtime: {}
+//             }
+//         })
+//     }
+// }
+
+// const passNotificationsCheck: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             const originalQuery = window.navigator.permissions.query as any
+            
+//             return window.navigator.permissions.query = (parameters) => {
+//                 return parameters.name === "notifications" ? 
+//                     Promise.resolve({ state: Notification.permission }) :
+//                     originalQuery(parameters)
+//             }
+//         })
+//     }
+// }
+
+// const mockPlugins: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             Object.defineProperty(navigator, "plugins", {
+//                 get: () => [1, 2, 3, 4, 5],
+//             })
+//         })
+//     }
+// }
+
+// const mockLanguages: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             Object.defineProperty(navigator, "languages", {
+//                 get: () => ["en-US", "en"],
+//             })
+//         })
+//     }
+// }
+
+// const hideAutomationExtensions: PuppeteerClientAction = {
+//     type: "beforeRequest",
+//     func: async (page) => {
+//         await page.evaluateOnNewDocument(() => {
+//             Object.defineProperty(navigator, "webdriver", {
+//                 get: () => undefined
+//             })
+
+//             delete (navigator as any).__proto__.webdriver
+//         })
+//     }
+// }
+
+// ;(async () => {
+//     const client = new PuppeteerClient({
+//         headless: true,
+//         args: ["--no-sandbox", "--disable-setuid-sandbox"],
+//         userAgent: fakeUa
+//     })
+
+//     const pageParser = await client.get({
+//         url: "https://www.terabyteshop.com.br/produto/17216/monitor-gamer-superframe-vision-24pol-fullhd-165hz-hdmidp-sfv2409s",
+//         actions: [
+//             randomizeViewportSize,
+//             skipAssetsLoading,
+//             passWebdriverCheck,
+//             passChromeCheck,
+//             passNotificationsCheck,
+//             mockPlugins,
+//             mockLanguages,
+//             hideAutomationExtensions
+//         ]
+//     })
+
+//     const pageParserModel = {
+//         title: {
+//             query: "title",
+//             extractor: extractInnerText
+//         }
+//     } satisfies ParsingModel
+
+//     const pageData = pageParser.parseItem({ model: pageParserModel })
+
+//     console.log(pageData.title)
+
+//     await client.close()
+// })();

package/dev-scripts/prepare-package-json.js

@@ -0,0 +1,31 @@
+const path = require("path")
+const fs = require("fs")
+
+const distDir = path.join(__dirname, "..", "dist")
+
+function createEsmModulePackageJson() {
+    fs.readdirSync(distDir)
+        .forEach((dir) => {
+            if (dir === "esm") {
+                const packageJsonFile = path.join(distDir, dir, "/package.json")
+
+                if (!fs.existsSync(packageJsonFile)) {
+                    fs.writeFileSync(
+                        packageJsonFile,
+                        new Uint8Array(Buffer.from('{"type": "module"}')),
+                    )
+                }
+            } else if (dir == "cjs") {
+                const packageJsonFile = path.join(distDir, dir, "/package.json")
+
+                if (!fs.existsSync(packageJsonFile)) {
+                    fs.writeFileSync(
+                        packageJsonFile,
+                        new Uint8Array(Buffer.from('{"type": "commonjs"}')),
+                    )
+                }
+            }
+        })
+}
+
+createEsmModulePackageJson()

package/dist/cjs/actions.js

@@ -0,0 +1,232 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toGrayScale = toGrayScale;
+exports.cropImage = cropImage;
+exports.resizeImage = resizeImage;
+exports.rotateImage = rotateImage;
+exports.blurImage = blurImage;
+exports.modulateSaturation = modulateSaturation;
+exports.modulateBrightness = modulateBrightness;
+exports.invertColors = invertColors;
+exports.addBorder = addBorder;
+exports.adjustContrast = adjustContrast;
+exports.modulateOpacity = modulateOpacity;
+exports.flipImage = flipImage;
+exports.flopImage = flopImage;
+exports.insertText = insertText;
+exports.insertCircle = insertCircle;
+exports.insertRectangle = insertRectangle;
+exports.insertLine = insertLine;
+const canvas_1 = require("canvas");
+const constants_1 = require("./constants");
+function toGrayScale(grayscale = true) {
+    return (image) => image.grayscale(grayscale);
+}
+function cropImage(options) {
+    return (image) => image.extract(options);
+}
+function resizeImage({ width, height, fit = "inside" }) {
+    return (image) => image.resize(width, height, { fit: fit });
+}
+function rotateImage(angle) {
+    return (image) => image.rotate(angle);
+}
+function blurImage(sigma = 1) {
+    return (image) => image.blur(sigma);
+}
+function modulateSaturation(saturation) {
+    return (image) => image.modulate({ saturation });
+}
+function modulateBrightness(brightness) {
+    return (image) => image.modulate({ brightness });
+}
+function invertColors() {
+    return (image) => image.negate();
+}
+function addBorder({ size, color = constants_1.colors.black }) {
+    return (image) => image.extend({
+        top: size,
+        bottom: size,
+        left: size,
+        right: size,
+        background: color
+    });
+}
+function adjustContrast(contrast) {
+    return (image) => {
+        const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
+        return image.linear(factor, -(128 * factor) + 128);
+    };
+}
+function modulateOpacity(opacity) {
+    return (image) => image.flatten({ background: { alpha: opacity } });
+}
+function flipImage() {
+    return (image) => image.flip();
+}
+function flopImage() {
+    return (image) => image.flop();
+}
+function insertText({ text, font, x, y, backgroundColor = constants_1.insertTextDefaultOptions.backgroundColor, anchor = constants_1.insertTextDefaultOptions.anchor, stroke, rotation = constants_1.insertTextDefaultOptions.rotation }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const width = imageMetadata.width;
+        const height = imageMetadata.height;
+        const canvas = (0, canvas_1.createCanvas)(width, height);
+        const context = canvas.getContext("2d");
+        if (backgroundColor !== "transparent") {
+            context.fillStyle = backgroundColor;
+            context.fillRect(0, 0, width, height);
+        }
+        if (font.filePath) {
+            (0, canvas_1.registerFont)(font.filePath, { family: font.name });
+        }
+        context.font = `${font.size}px ${font.name ?? constants_1.insertTextDefaultOptions.font.name}`;
+        context.fillStyle = font.color ?? constants_1.colors.black;
+        const textMetrics = context.measureText(text);
+        const textWidth = textMetrics.width;
+        const textHeight = font.size;
+        const anchorOffsets = {
+            "top-left": {
+                x: 0,
+                y: 0
+            },
+            "top-center": {
+                x: -textWidth / 2,
+                y: 0
+            },
+            "top-right": {
+                x: -textWidth,
+                y: 0
+            },
+            "middle-left": {
+                x: 0,
+                y: -textHeight / 2
+            },
+            "middle-center": {
+                x: -textWidth / 2,
+                y: -textHeight / 2
+            },
+            "middle-right": {
+                x: -textWidth,
+                y: -textHeight / 2
+            },
+            "bottom-left": {
+                x: 0,
+                y: -textHeight
+            },
+            "bottom-center": {
+                x: -textWidth / 2,
+                y: -textHeight
+            },
+            "bottom-right": {
+                x: -textWidth,
+                y: -textHeight
+            }
+        };
+        const { x: offsetX, y: offsetY } = anchorOffsets[anchor] || { x: 0, y: 0 };
+        const adjustedX = x + offsetX;
+        const adjustedY = y + offsetY;
+        const adjustedRotation = rotation ?? 0;
+        context.save();
+        context.translate(adjustedX, adjustedY);
+        context.rotate((adjustedRotation * Math.PI) / 180);
+        if (stroke) {
+            context.strokeStyle = stroke.fill;
+            context.lineWidth = stroke.width;
+            context.lineJoin = "round";
+            context.strokeText(text, 0, 0);
+        }
+        context.fillStyle = font.color ?? constants_1.colors.black;
+        context.fillText(text, 0, 0);
+        context.restore();
+        const textBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: textBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertCircle({ x, y, radius, fill }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const width = imageMetadata.width;
+        const height = imageMetadata.height;
+        const canvas = (0, canvas_1.createCanvas)(width, height);
+        const context = canvas.getContext("2d");
+        context.beginPath();
+        context.arc(x, y, radius, 0, Math.PI * 2, true);
+        context.closePath();
+        context.fillStyle = fill;
+        context.fill();
+        const circleBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: circleBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertRectangle({ x, y, width, height, fill, borderRadius }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const canvasWidth = imageMetadata.width;
+        const canvasHeight = imageMetadata.height;
+        const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
+        const context = canvas.getContext("2d");
+        context.fillStyle = fill;
+        if (borderRadius && borderRadius > 0) {
+            context.beginPath();
+            context.moveTo(x + borderRadius, y);
+            context.lineTo(x + width - borderRadius, y);
+            context.arcTo(x + width, y, x + width, y + height, borderRadius);
+            context.lineTo(x + width, y + height - borderRadius);
+            context.arcTo(x + width, y + height, x, y + height, borderRadius);
+            context.lineTo(x + borderRadius, y + height);
+            context.arcTo(x, y + height, x, y, borderRadius);
+            context.lineTo(x, y + borderRadius);
+            context.arcTo(x, y, x + width, y, borderRadius);
+            context.closePath();
+            context.fill();
+        }
+        else {
+            context.fillRect(x, y, width, height);
+        }
+        const rectangleBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: rectangleBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}
+function insertLine({ x1, y1, x2, y2, color, width }) {
+    return async (image) => {
+        const imageMetadata = await image.metadata();
+        const canvasWidth = imageMetadata.width;
+        const canvasHeight = imageMetadata.height;
+        const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
+        const context = canvas.getContext("2d");
+        context.strokeStyle = color;
+        context.lineWidth = width;
+        context.beginPath();
+        context.moveTo(x1, y1);
+        context.lineTo(x2, y2);
+        context.stroke();
+        const lineBuffer = canvas.toBuffer();
+        return image.composite([
+            {
+                input: lineBuffer,
+                top: 0,
+                left: 0
+            }
+        ]);
+    };
+}

package/dist/cjs/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertTextDefaultOptions = exports.createImageDefaultOptions = exports.defautltTemplateAcitonType = exports.colors = void 0;
+const color_util_1 = require("./utils/color.util");
+const colors = {
+    black: "#000000",
+    white: "#FFFFFF"
+};
+exports.colors = colors;
+const defautltTemplateAcitonType = "beforeLayersProccess";
+exports.defautltTemplateAcitonType = defautltTemplateAcitonType;
+const createImageDefaultOptions = {
+    chnannels: 4,
+    fill: (0, color_util_1.rgba)(0, 0, 0, 0),
+    format: "png"
+};
+exports.createImageDefaultOptions = createImageDefaultOptions;
+const insertTextDefaultOptions = {
+    font: {
+        name: "sans-serif",
+    },
+    anchor: "top-left",
+    backgroundColor: "transparent",
+    rotation: 0
+};
+exports.insertTextDefaultOptions = insertTextDefaultOptions;

package/dist/cjs/index.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.processImageTemplate = processImageTemplate;
+exports.extendImageTemplate = extendImageTemplate;
+const constants_1 = require("./constants");
+const clone_image_util_ts_1 = __importDefault(require("./utils/clone-image.util.ts"));
+function extractActions(actions) {
+    const actionsLayersProccess = [];
+    const actionsAfterLayersProccess = [];
+    if (!actions) {
+        actions = [];
+    }
+    for (const action of actions) {
+        const actionType = typeof action === "function" ? constants_1.defautltTemplateAcitonType : action.type;
+        const actionFunc = typeof action === "function" ? action : action.func;
+        if (actionType === "beforeLayersProccess") {
+            actionsLayersProccess.push(actionFunc);
+        }
+        else {
+            actionsAfterLayersProccess.push(actionFunc);
+        }
+    }
+    return {
+        before: actionsLayersProccess,
+        after: actionsAfterLayersProccess
+    };
+}
+async function processImageTemplate(template) {
+    const actions = extractActions(template.actions);
+    let image = template.image;
+    for (const action of actions.before) {
+        const imageResult = await action(image);
+        image = await (0, clone_image_util_ts_1.default)(imageResult);
+    }
+    if (template.layers) {
+        const layerImages = [];
+        for (const layer of template.layers) {
+            const currentImage = await processImageTemplate(layer.template);
+            const currentImageBuffer = await currentImage.png().toBuffer();
+            layerImages.push({
+                input: currentImageBuffer,
+                top: layer.y,
+                left: layer.x
+            });
+        }
+        image = image.composite(layerImages);
+    }
+    for (const action of actions.after) {
+        const imageResult = await action(image);
+        image = await (0, clone_image_util_ts_1.default)(imageResult);
+    }
+    return image;
+}
+function extendImageTemplate(template, extendTemplate) {
+    const actions = [];
+    const layers = [];
+    if (template.layers) {
+        layers.push(...template.layers);
+    }
+    if (extendTemplate.layers) {
+        layers.push(...extendTemplate.layers);
+    }
+    if (template.actions) {
+        actions.push(...template.actions);
+    }
+    if (extendTemplate.actions) {
+        actions.push(...extendTemplate.actions);
+    }
+    return {
+        image: template.image,
+        actions: actions,
+        layers: layers
+    };
+}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/cjs/utils/clone-image.util.ts.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const sharp_1 = __importDefault(require("sharp"));
+async function cloneImage(image) {
+    const imageBuffer = await image.toBuffer();
+    const clonedImage = (0, sharp_1.default)(imageBuffer);
+    return clonedImage;
+}
+exports.default = cloneImage;

package/dist/cjs/utils/color.util.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rgb = rgb;
+exports.rgba = rgba;
+exports.hex = hex;
+function componentToHex(component) {
+    const hex = component.toString(16);
+    return hex.padStart(2, "0");
+}
+function rgb(red, green, blue) {
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
+}
+function rgba(red, green, blue, alpha) {
+    const alphaHex = componentToHex(Math.round(alpha * 255));
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}${alphaHex}`;
+}
+function hex(value) {
+    const hexadecimalValue = value.toString(16);
+    const fromatedHexadecimal = `#${hexadecimalValue.padStart(6, "0")}`;
+    return fromatedHexadecimal;
+}

package/dist/cjs/utils/create-image.util.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const sharp_1 = __importDefault(require("sharp"));
+const constants_1 = require("../constants");
+function createImage({ width, height, fill = constants_1.createImageDefaultOptions.fill, channels = constants_1.createImageDefaultOptions.chnannels, format = constants_1.createImageDefaultOptions.format, }) {
+    return (0, sharp_1.default)({
+        create: {
+            width: width,
+            height: height,
+            channels: channels,
+            background: fill,
+        },
+    })[format]();
+}
+exports.default = createImage;

package/dist/cjs/utils/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hex = exports.rgb = exports.rgba = exports.openImage = exports.createImage = void 0;
+const create_image_util_1 = __importDefault(require("./create-image.util"));
+exports.createImage = create_image_util_1.default;
+const color_util_1 = require("./color.util");
+Object.defineProperty(exports, "rgb", { enumerable: true, get: function () { return color_util_1.rgb; } });
+Object.defineProperty(exports, "rgba", { enumerable: true, get: function () { return color_util_1.rgba; } });
+Object.defineProperty(exports, "hex", { enumerable: true, get: function () { return color_util_1.hex; } });
+const open_image_util_1 = __importDefault(require("./open-image.util"));
+exports.openImage = open_image_util_1.default;

package/dist/cjs/utils/open-image.util.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const sharp_1 = __importDefault(require("sharp"));
+function openImage(filePath) {
+    return (0, sharp_1.default)(filePath);
+}
+exports.default = openImage;