xpict 0.0.1

package/src/actions.ts

@@ -0,0 +1,390 @@
+import { createCanvas, registerFont } from "canvas"
+import sharp from "sharp"
+
+import { colors, insertTextDefaultOptions } from "./constants"
+import { Image } from "."
+
+function toGrayScale(grayscale: boolean = true) {
+    return (image: Image) => image.grayscale(grayscale)
+}
+
+export type CropImageOptions = sharp.Region
+
+function cropImage(options: CropImageOptions) {
+    return (image: Image) => image.extract(options)
+}
+
+export type ResizeImageOptions = {
+    width: number
+    height: number
+    fit: keyof sharp.FitEnum
+}
+
+function resizeImage({
+    width,
+    height,
+    fit = "inside"
+}: ResizeImageOptions) {
+    return (image: Image) => image.resize(
+        width,
+        height,
+        { fit: fit }
+    )
+}
+
+function rotateImage(angle: number) {
+    return (image: Image) => image.rotate(angle)
+}
+
+function blurImage(sigma: number = 1) {
+    return (image: Image) => image.blur(sigma)
+}
+
+function modulateSaturation(saturation: number) {
+    return (image: Image) => image.modulate({ saturation })
+}
+
+function modulateBrightness(brightness: number) {
+    return (image: Image) => image.modulate({ brightness })
+}
+
+function invertColors() {
+    return (image: Image) => image.negate()
+}
+
+export type AddBorderOptions = {
+    size: number
+    color?: string
+}
+
+function addBorder({
+    size,
+    color = colors.black
+}: AddBorderOptions) {
+    return (image: Image) =>
+        image.extend({
+            top: size,
+            bottom: size,
+            left: size,
+            right: size,
+            background: color
+        })
+}
+
+function adjustContrast(contrast: number) {
+    return (image: Image) => {
+        const factor = (259 * (contrast + 255)) / (255 * (259 - contrast))
+        return image.linear(factor, -(128 * factor) + 128)
+    }
+}
+
+function modulateOpacity(opacity: number) {
+    return (image: Image) => image.flatten({ background: { alpha: opacity } })
+}
+
+function flipImage() {
+    return (image: Image) => image.flip()
+}
+
+function flopImage() {
+    return (image: Image) => image.flop()
+}
+
+export type FontOptions = {
+    size: number
+    color?: string
+    name?: string
+    filePath?: string
+}
+
+export type TextAnchor = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right"
+
+export type Stroke = {
+    fill: string
+    width: number
+}
+
+export type InsertTextOptions = {
+    text: string
+    font: FontOptions
+    x: number
+    y: number
+    backgroundColor?: string
+    anchor?: TextAnchor
+    stroke?: Stroke
+    rotation?: number
+}
+
+export type AnchorOffsets = Record<TextAnchor, { x: number, y: number }>
+
+function insertText({
+    text,
+    font,
+    x,
+    y,
+    backgroundColor = insertTextDefaultOptions.backgroundColor,
+    anchor = insertTextDefaultOptions.anchor as TextAnchor,
+    stroke,
+    rotation = insertTextDefaultOptions.rotation
+}: InsertTextOptions) {
+    return async (image: Image) => {
+        const imageMetadata = await image.metadata()
+        const width = imageMetadata.width!
+        const height = imageMetadata.height!
+
+        const canvas = createCanvas(width, height)
+        const context = canvas.getContext("2d")
+
+        if (backgroundColor !== "transparent") {
+            context.fillStyle = backgroundColor
+            context.fillRect(0, 0, width, height)
+        }
+
+        if (font.filePath) {
+            registerFont(
+                font.filePath,
+                { family: font.name! }
+            )
+        }
+
+        context.font = `${font.size}px ${font.name ?? insertTextDefaultOptions.font.name}`
+        context.fillStyle = font.color ?? colors.black
+
+        const textMetrics = context.measureText(text)
+        const textWidth = textMetrics.width
+        const textHeight = font.size
+
+        const anchorOffsets: 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 ?? colors.black
+        context.fillText(text, 0, 0)
+
+        context.restore()
+
+        const textBuffer = canvas.toBuffer()
+
+        return image.composite([
+            {
+                input: textBuffer,
+                top: 0,
+                left: 0
+            }
+        ])
+    }
+}
+
+export type InsertCircleOptions = {
+    x: number
+    y: number
+    radius: number
+    fill: string
+}
+
+function insertCircle({
+    x,
+    y,
+    radius,
+    fill
+}: InsertCircleOptions) {
+    return async (image: Image) => {
+        const imageMetadata = await image.metadata()
+        const width = imageMetadata.width!
+        const height = imageMetadata.height!
+
+        const canvas = 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
+            }
+        ])
+    }
+}
+
+export type InsertRectangleOptions = {
+    x: number
+    y: number
+    width: number
+    height: number
+    fill: string
+    borderRadius?: number
+}
+
+function insertRectangle({
+    x,
+    y,
+    width,
+    height,
+    fill,
+    borderRadius
+}: InsertRectangleOptions) {
+    return async (image: Image) => {
+        const imageMetadata = await image.metadata()
+        const canvasWidth = imageMetadata.width!
+        const canvasHeight = imageMetadata.height!
+
+        const canvas = 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
+            }
+        ])
+    }
+}
+
+export type InsertLineOptions = {
+    x1: number
+    y1: number
+    x2: number
+    y2: number
+    color: string
+    width: number
+}
+
+function insertLine({
+    x1,
+    y1,
+    x2,
+    y2,
+    color,
+    width
+}: InsertLineOptions) {
+    return async (image: Image) => {
+        const imageMetadata = await image.metadata()
+        const canvasWidth = imageMetadata.width!
+        const canvasHeight = imageMetadata.height!
+
+        const canvas = 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
+            }
+        ])
+    }
+}
+ 
+export {
+    toGrayScale,
+    cropImage,
+    resizeImage,
+    rotateImage,
+    blurImage,
+    modulateSaturation,
+    modulateBrightness,
+    invertColors,
+    addBorder,
+    adjustContrast,
+    modulateOpacity,
+    flipImage,
+    flopImage,
+    insertText,
+    insertCircle,
+    insertRectangle,
+    insertLine
+}

package/src/constants.ts

@@ -0,0 +1,30 @@
+import { rgba } from "./utils/color.util"
+
+const colors = {
+    black: "#000000",
+    white: "#FFFFFF"
+}
+
+const defautltTemplateAcitonType = "beforeLayersProccess"
+
+const createImageDefaultOptions = {
+    chnannels: 4,
+    fill: rgba(0, 0, 0, 0),
+    format: "png"
+}
+
+const insertTextDefaultOptions = {
+    font: {
+        name: "sans-serif", 
+    },
+    anchor: "top-left",
+    backgroundColor: "transparent",
+    rotation: 0
+}
+
+export {
+    colors,
+    defautltTemplateAcitonType,
+    createImageDefaultOptions,
+    insertTextDefaultOptions
+}

package/src/index.ts

@@ -0,0 +1,124 @@
+import sharp, { Sharp } from "sharp"
+
+import { defautltTemplateAcitonType } from "./constants"
+import cloneImage from "./utils/clone-image.util.ts"
+
+export type Image = Sharp
+
+export type ImageTemplateLayer = {
+    x: number
+    y: number
+    template: ImageTemplate
+}
+
+export type ImageTemplateActionFunction = (image: Image) => Image | Promise<Image>
+
+export type ImageTemplateAction = ImageTemplateActionFunction | {
+    type: "beforeLayersProccess" | "afterLayersProccess"
+    func: ImageTemplateActionFunction
+}
+
+export type ImageTemplate = {
+    image: Image
+    actions?: ImageTemplateAction[]
+    layers?: ImageTemplateLayer[]
+}
+
+export type ExtractActionsResult = {
+    before: ImageTemplateActionFunction[]
+    after: ImageTemplateActionFunction[]
+}
+
+function extractActions(actions: ImageTemplateAction[] | undefined): ExtractActionsResult {
+    const actionsLayersProccess: ImageTemplateActionFunction[] = []
+    const actionsAfterLayersProccess: ImageTemplateActionFunction[] = []
+
+    if (!actions) {
+        actions = []
+    }
+
+    for (const action of actions) {
+        const actionType = typeof action === "function" ? 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: ImageTemplate): Promise<Image> {
+    const actions = extractActions(template.actions)
+    let image = template.image
+
+    for (const action of actions.before) {
+        const imageResult = await action(image)
+        image = await cloneImage(imageResult)
+    }
+
+    if (template.layers) {
+        const layerImages: sharp.OverlayOptions[] = []
+
+        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 cloneImage(imageResult)
+    }
+
+    return image
+}
+
+function extendImageTemplate(
+    template: ImageTemplate,
+    extendTemplate: Omit<ImageTemplate, "image">
+) {
+    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
+    }
+}
+
+export {
+    processImageTemplate,
+    extendImageTemplate
+}

package/src/utils/clone-image.util.ts.ts

@@ -0,0 +1,11 @@
+import sharp from "sharp"
+
+import { Image } from ".."
+
+async function cloneImage(image: Image) {
+    const imageBuffer = await image.toBuffer()
+    const clonedImage = sharp(imageBuffer)
+    return clonedImage
+}
+
+export default cloneImage

package/src/utils/color.util.ts

@@ -0,0 +1,25 @@
+function componentToHex(component: number): string {
+    const hex = component.toString(16)
+    return hex.padStart(2, "0")
+}
+
+function rgb(red: number, green: number, blue: number): string {
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`
+}
+
+function rgba(red: number, green: number, blue: number, alpha: number): string {
+    const alphaHex = componentToHex(Math.round(alpha * 255))
+    return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}${alphaHex}`
+}
+
+function hex(value: number) {
+    const hexadecimalValue = value.toString(16)
+    const fromatedHexadecimal = `#${hexadecimalValue.padStart(6, "0")}`
+    return fromatedHexadecimal
+}
+
+export {
+    rgb,
+    rgba,
+    hex
+}

package/src/utils/create-image.util.ts

@@ -0,0 +1,34 @@
+import sharp from "sharp"
+
+import { createImageDefaultOptions } from "../constants"
+
+export type ImageChannels = 3 | 4
+
+export type ImageFormat = "png" | "jpeg" | "webp" | "avif" | "gif"
+
+export type CreateImageOptions = {
+    width: number
+    height: number
+    fill?: sharp.Color
+    channels?: ImageChannels
+    format?: ImageFormat
+}
+
+function createImage({
+    width,
+    height,
+    fill = createImageDefaultOptions.fill,
+    channels = createImageDefaultOptions.chnannels as ImageChannels,
+    format = createImageDefaultOptions.format as ImageFormat,
+}: CreateImageOptions) {
+    return sharp({
+        create: {
+            width: width,
+            height: height,
+            channels: channels,
+            background: fill,
+        },
+    })[format]()
+}
+
+export default createImage

package/src/utils/index.ts

@@ -0,0 +1,11 @@
+import createImage from "./create-image.util"
+import { rgb, rgba, hex } from "./color.util"
+import openImage from "./open-image.util"
+
+export {
+    createImage,
+    openImage,
+    rgba,
+    rgb,
+    hex
+}

package/src/utils/open-image.util.ts

@@ -0,0 +1,9 @@
+import sharp from "sharp"
+
+import { Image } from ".."
+
+function openImage(filePath: string): Image {
+    return sharp(filePath)
+}
+
+export default openImage

package/tsconfig.cjs.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist/cjs",
+        "module": "commonjs"
+    }
+}

package/tsconfig.esm.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist/esm",
+        "module": "esnext"
+    }
+}

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/tsconfig.types.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist/types",
+        "declaration": true,
+        "emitDeclarationOnly": true
+    }
+}