apexify.js 4.5.30 → 4.5.40

package/dist/canvas/ApexPainter.js

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ApexPainter = void 0;
 const canvas_1 = require("@napi-rs/canvas");
 const gifencoder_1 = __importDefault(require("gifencoder"));
+const fluent_ffmpeg_1 = __importDefault(require("fluent-ffmpeg"));
 const stream_1 = require("stream");
+const axios_1 = __importDefault(require("axios"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const utils_1 = require("./utils/utils");
@@ -48,12 +50,18 @@ class ApexPainter {
         if (!Array.isArray(images)) {
             images = [images];
         }
-        if (!canvasBuffer.buffer) {
-            throw new Error('You need to provide your canvasConfig. Check documentation if you don\'t know.');
+        let existingCanvas;
+        if (Buffer.isBuffer(canvasBuffer)) {
+            existingCanvas = await (0, canvas_1.loadImage)(canvasBuffer);
+        }
+        else if (canvasBuffer && canvasBuffer.buffer) {
+            existingCanvas = await (0, canvas_1.loadImage)(canvasBuffer.buffer);
+        }
+        else {
+            throw new Error('Invalid canvasBuffer provided, should be Buffer or CanvasResults object with buffer');
         }
-        const existingCanvas = await (0, canvas_1.loadImage)(canvasBuffer.buffer);
         if (!existingCanvas) {
-            throw new Error('Either buffer or canvasConfig is an empty background with no properties');
+            throw new Error('Unable to load image from buffer');
         }
         const canvas = (0, canvas_1.createCanvas)(existingCanvas.width, existingCanvas.height);
         const ctx = canvas.getContext('2d');
@@ -68,9 +76,22 @@ class ApexPainter {
     }
     async createText(textOptionsArray, buffer) {
         try {
-            const existingImage = await (0, canvas_1.loadImage)(buffer.buffer);
-            if (!existingImage)
-                throw new Error("Invalid image buffer. Make sure to pass a valid canvas buffer.");
+            if (!Array.isArray(textOptionsArray)) {
+                textOptionsArray = [textOptionsArray];
+            }
+            let existingImage;
+            if (Buffer.isBuffer(buffer)) {
+                existingImage = await (0, canvas_1.loadImage)(buffer);
+            }
+            else if (buffer && buffer.buffer) {
+                existingImage = await (0, canvas_1.loadImage)(buffer.buffer);
+            }
+            else {
+                throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+            }
+            if (!existingImage) {
+                throw new Error('Unable to load image from buffer');
+            }
             const canvas = (0, canvas_1.createCanvas)(existingImage.width, existingImage.height);
             const ctx = canvas.getContext("2d");
             ctx.drawImage(existingImage, 0, 0);
@@ -89,11 +110,24 @@ class ApexPainter {
             throw new Error("Invalid image buffer");
         }
     }
-    async createCustom(buffer, options) {
+    async createCustom(options, buffer) {
         try {
-            const existingImage = await (0, canvas_1.loadImage)(buffer.buffer);
-            if (!existingImage)
-                throw new Error("Invalid image buffer. Make sure to pass a valid canvas buffer.");
+            if (!Array.isArray(options)) {
+                options = [options];
+            }
+            let existingImage;
+            if (Buffer.isBuffer(buffer)) {
+                existingImage = await (0, canvas_1.loadImage)(buffer);
+            }
+            else if (buffer && buffer.buffer) {
+                existingImage = await (0, canvas_1.loadImage)(buffer.buffer);
+            }
+            else {
+                throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+            }
+            if (!existingImage) {
+                throw new Error('Unable to load image from buffer');
+            }
             const canvas = (0, canvas_1.createCanvas)(existingImage.width, existingImage.height);
             const ctx = canvas.getContext("2d");
             ctx.drawImage(existingImage, 0, 0);
@@ -105,7 +139,7 @@ class ApexPainter {
             throw new Error("Failed to create custom image");
         }
     }
-    async createGIF(images, options) {
+    async createGIF(gifFrames, options) {
         async function resizeImage(image, targetWidth, targetHeight) {
             const canvas = (0, canvas_1.createCanvas)(targetWidth, targetHeight);
             const ctx = canvas.getContext("2d");
@@ -121,176 +155,94 @@ class ApexPainter {
             bufferStream.on('data', (chunk) => {
                 chunks.push(chunk);
             });
-            const customBufferStream = bufferStream;
-            customBufferStream.getBuffer = function () {
-                return Buffer.concat(chunks);
+            return {
+                ...bufferStream,
+                getBuffer: function () {
+                    return Buffer.concat(chunks);
+                }
             };
-            return customBufferStream;
         }
         function validateOptions(options) {
             if (options.outputFormat === "file" && !options.outputFile) {
                 throw new Error("Output file path is required when using file output format.");
             }
-            if (options.repeat !== undefined &&
-                (typeof options.repeat !== "number" || options.repeat < 0)) {
+            if (options.repeat !== undefined && (typeof options.repeat !== "number" || options.repeat < 0)) {
                 throw new Error("Repeat must be a non-negative number or undefined.");
             }
-            if (options.quality !== undefined &&
-                (typeof options.quality !== "number" ||
-                    options.quality < 1 ||
-                    options.quality > 20)) {
+            if (options.quality !== undefined && (typeof options.quality !== "number" || options.quality < 1 || options.quality > 20)) {
                 throw new Error("Quality must be a number between 1 and 20 or undefined.");
             }
-            if (options.canvasSize) {
-                if (options.canvasSize.width !== undefined &&
-                    (!Number.isInteger(options.canvasSize.width) ||
-                        options.canvasSize.width <= 0)) {
-                    throw new Error("Canvas width must be a positive integer or undefined.");
-                }
-                if (options.canvasSize.height !== undefined &&
-                    (!Number.isInteger(options.canvasSize.height) ||
-                        options.canvasSize.height <= 0)) {
-                    throw new Error("Canvas height must be a positive integer or undefined.");
-                }
-            }
-            if (options.delay !== undefined &&
-                (!Number.isInteger(options.delay) || options.delay <= 0)) {
-                throw new Error("Delay must be a positive integer or undefined.");
-            }
-            if (options.watermark !== undefined &&
-                typeof options.watermark !== "boolean") {
+            if (options.watermark && typeof options.watermark.enable !== "boolean") {
                 throw new Error("Watermark must be a boolean or undefined.");
             }
-            if (options.textOverlay !== undefined) {
-                if (!options.textOverlay.text ||
-                    typeof options.textOverlay.text !== "string") {
+            if (options.textOverlay) {
+                const textOptions = options.textOverlay;
+                if (!textOptions.text || typeof textOptions.text !== "string") {
                     throw new Error("Text overlay text is required and must be a string.");
                 }
-                if (options.textOverlay.fontName !== undefined &&
-                    typeof options.textOverlay.fontName !== "string") {
-                    throw new Error("Text overlay fontName must be a string or undefined.");
-                }
-                if (options.textOverlay.fontPath !== undefined &&
-                    typeof options.textOverlay.fontPath !== "string") {
-                    throw new Error("Text overlay fontPath must be a string or undefined.");
-                }
-                if (options.textOverlay.fontSize !== undefined &&
-                    (!Number.isInteger(options.textOverlay.fontSize) ||
-                        options.textOverlay.fontSize <= 0)) {
+                if (textOptions.fontSize !== undefined && (!Number.isInteger(textOptions.fontSize) || textOptions.fontSize <= 0)) {
                     throw new Error("Text overlay fontSize must be a positive integer or undefined.");
                 }
-                if (options.textOverlay.fontColor !== undefined &&
-                    typeof options.textOverlay.fontColor !== "string") {
+                if (textOptions.fontColor !== undefined && typeof textOptions.fontColor !== "string") {
                     throw new Error("Text overlay fontColor must be a string or undefined.");
                 }
             }
         }
-        function validateImageObject(imageObject) {
-            return (imageObject &&
-                typeof imageObject === "object" &&
-                "source" in imageObject &&
-                "isRemote" in imageObject);
-        }
-        function validateImages(images) {
-            if (!Array.isArray(images)) {
-                throw new Error('The "images" parameter must be an array.');
-            }
-            if (images.length === 0) {
-                throw new Error('The "images" array must contain at least one image object.');
-            }
-            for (const imageObject of images) {
-                if (!validateImageObject(imageObject)) {
-                    throw new Error('Each image object must have "source" and "isRemote" properties.');
-                }
-            }
-        }
         try {
             validateOptions(options);
-            validateImages(images);
             const canvasWidth = options.width || 1200;
             const canvasHeight = options.height || 1200;
             const encoder = new gifencoder_1.default(canvasWidth, canvasHeight);
-            const outputStream = options.outputFile
-                ? createOutputStream(options.outputFile)
-                : createBufferStream();
-            // @ts-ignore: Ignore type checking for this line
+            const outputStream = options.outputFile ? createOutputStream(options.outputFile) : createBufferStream();
             encoder.createReadStream().pipe(outputStream);
             encoder.start();
             encoder.setRepeat(options.repeat || 0);
             encoder.setQuality(options.quality || 10);
-            encoder.setDelay(options.delay || 3000);
             const canvas = (0, canvas_1.createCanvas)(canvasWidth, canvasHeight);
             const ctx = canvas.getContext("2d");
-            for (const imageInfo of images) {
-                const image = imageInfo.isRemote
-                    ? await (0, canvas_1.loadImage)(imageInfo.source)
-                    : await (0, canvas_1.loadImage)(imageInfo.source);
+            for (const frame of gifFrames) {
+                const image = await (0, canvas_1.loadImage)(frame.background);
                 const resizedImage = await resizeImage(image, canvasWidth, canvasHeight);
                 ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(resizedImage, 0, 0);
                 if (options.watermark?.enable) {
-                    const watermark = await (0, canvas_1.loadImage)(options.watermark?.url);
-                    if (!watermark)
-                        throw new Error("Invalid watermark url");
+                    const watermark = await (0, canvas_1.loadImage)(options.watermark.url);
                     ctx.drawImage(watermark, 10, canvasHeight - watermark.height - 10);
                 }
                 if (options.textOverlay) {
-                    const textOptions = options.textOverlay;
-                    const fontPath = textOptions.fontPath;
-                    const fontName = textOptions.fontName || "Arial";
-                    const fontSize = textOptions.fontSize || 20;
-                    const fontColor = textOptions.fontColor || "white";
-                    const x = textOptions.x || 10;
-                    const y = textOptions.y || 30;
-                    if (fontPath) {
-                        canvas_1.GlobalFonts.registerFromPath(path_1.default.join(options.basDir, fontPath), fontName);
-                    }
-                    ctx.font = `${fontSize}px ${fontName}`;
-                    ctx.fillStyle = fontColor;
-                    ctx.fillText(textOptions.text, x, y);
+                    ctx.font = `${options.textOverlay.fontSize || 20}px Arial`;
+                    ctx.fillStyle = options.textOverlay.fontColor || "white";
+                    ctx.fillText(options.textOverlay.text, options.textOverlay.x || 10, options.textOverlay.y || 30);
                 }
+                encoder.setDelay(frame.duration);
                 encoder.addFrame(ctx);
             }
             encoder.finish();
             outputStream.end();
             if (options.outputFormat === "file") {
-                if (!options.outputFile) {
-                    throw new Error("Please provide a valid file path");
-                }
                 await new Promise((resolve) => outputStream.on("finish", resolve));
             }
             else if (options.outputFormat === "base64") {
-                outputStream.on("finish", () => {
-                });
                 if ('getBuffer' in outputStream) {
                     return outputStream.getBuffer().toString("base64");
                 }
-                else {
-                    throw new Error("outputStream does not have getBuffer method");
-                }
             }
             else if (options.outputFormat === "attachment") {
-                outputStream.on("finish", () => {
-                });
                 const gifStream = encoder.createReadStream();
                 return [{ attachment: gifStream, name: "gif.js" }];
             }
             else if (options.outputFormat === "buffer") {
-                outputStream.on("finish", () => {
-                });
                 if ('getBuffer' in outputStream) {
                     return outputStream.getBuffer();
                 }
-                else {
-                    throw new Error("outputStream does not have getBuffer method");
-                }
             }
             else {
-                throw new Error("Error: Please provide a valid format: 'buffer', 'base64', 'attachment', or 'output/file/path'.");
+                throw new Error("Invalid output format. Supported formats are 'file', 'base64', 'attachment', and 'buffer'.");
             }
         }
         catch (e) {
             console.error(e.message);
+            throw e; // Re-throw the error after logging
         }
     }
     async resize(resizeOptions) {
@@ -302,8 +254,8 @@ class ApexPainter {
     async processImage(imagePath, filters) {
         return (0, utils_1.imgEffects)(imagePath, filters);
     }
-    async colorsFilter(imagePath, filterColor) {
-        return (0, utils_1.applyColorFilters)(imagePath, filterColor);
+    async colorsFilter(imagePath, filterColor, opacity) {
+        return (0, utils_1.applyColorFilters)(imagePath, filterColor, opacity);
     }
     async colorAnalysis(imagePath) {
         return (0, utils_1.detectColors)(imagePath);
@@ -314,6 +266,30 @@ class ApexPainter {
     async removeBackground(imageURL, apiKey) {
         return (0, utils_1.bgRemoval)(imageURL, apiKey);
     }
+    async blend(layers, baseImageBuffer) {
+        try {
+            // Load the base image
+            const baseImage = await (0, canvas_1.loadImage)(baseImageBuffer);
+            const canvas = (0, canvas_1.createCanvas)(baseImage.width, baseImage.height);
+            const ctx = canvas.getContext('2d');
+            // Draw the base image
+            ctx.drawImage(baseImage, 0, 0);
+            // Process each layer
+            for (const layer of layers) {
+                const layerImage = await (0, canvas_1.loadImage)(layer.image);
+                ctx.globalAlpha = layer.opacity !== undefined ? layer.opacity : 1.0;
+                ctx.globalCompositeOperation = layer.blendMode;
+                ctx.drawImage(layerImage, layer.position?.x || 0, layer.position?.y || 0);
+            }
+            ctx.globalAlpha = 1.0;
+            ctx.globalCompositeOperation = 'source-over';
+            return canvas.toBuffer('image/png');
+        }
+        catch (error) {
+            console.error('Error creating layered composition:', error);
+            throw new Error('Failed to create layered composition');
+        }
+    }
     async createChart(data, type) {
         if (!data || Object.keys(data).length === 0) {
             throw new Error('You need to provide datasets to create charts.');
@@ -421,6 +397,354 @@ class ApexPainter {
             ctx.globalAlpha = 1.0;
         }
     }
+    async extractFrames(videoSource, options) {
+        const frames = [];
+        const frameDir = path_1.default.join(__dirname, 'frames');
+        if (!fs_1.default.existsSync(frameDir)) {
+            fs_1.default.mkdirSync(frameDir);
+        }
+        const videoPath = typeof videoSource === 'string' ? videoSource : path_1.default.join(frameDir, 'temp-video.mp4');
+        if (Buffer.isBuffer(videoSource)) {
+            fs_1.default.writeFileSync(videoPath, videoSource);
+        }
+        else if (videoSource.startsWith('http')) {
+            await (0, axios_1.default)({
+                method: 'get',
+                url: videoSource,
+                responseType: 'arraybuffer'
+            })
+                .then((response) => {
+                fs_1.default.writeFileSync(videoPath, response.data);
+            })
+                .catch(err => {
+                throw new Error(`Error downloading video: ${err.message}`);
+            });
+        }
+        else if (!fs_1.default.existsSync(videoPath)) {
+            throw new Error("Video file not found at specified path.");
+        }
+        function processVideoExtraction(videoPath, frames, options, resolve, reject) {
+            const outputFormat = options.outputFormat || 'jpg';
+            const outputFileTemplate = `frame-%03d.${outputFormat}`;
+            (0, fluent_ffmpeg_1.default)(videoPath)
+                .on('end', () => {
+                console.log('Frames extracted successfully.');
+                resolve(frames);
+            })
+                .on('error', (err) => {
+                console.error('Error extracting frames:', err.message);
+                reject(err);
+            })
+                .outputOptions([`-vf fps=1/${options.interval / 1000}`, `-q:v 2`]) // Set frame rate
+                .saveToFile(path_1.default.join(frameDir, outputFileTemplate)); // Save frames with a sequence number
+            fluent_ffmpeg_1.default.ffprobe(videoPath, (err, metadata) => {
+                if (err) {
+                    return reject(err);
+                }
+                const duration = metadata?.format?.duration;
+                if (duration === undefined) {
+                    return reject(new Error("Video duration not found in metadata."));
+                }
+                const totalFrames = Math.floor(duration * 1000 / options.interval);
+                for (let i = 0; i < totalFrames; i++) {
+                    if (options.frameSelection && (i < (options.frameSelection.start || 0) || i > (options.frameSelection.end || totalFrames - 1))) {
+                        continue;
+                    }
+                    frames.push({
+                        source: path_1.default.join(frameDir, `frame-${String(i).padStart(3, '0')}.${outputFormat}`),
+                        isRemote: false
+                    });
+                }
+            });
+        }
+        return new Promise((resolve, reject) => {
+            processVideoExtraction(videoPath, frames, options, resolve, reject);
+        });
+    }
+    /**
+     * Sets a pattern on a specific area of a buffered image.
+     * @param {Buffer} buffer - The source image buffer.
+     * @param {Object} options - Options to customize the pattern.
+     * @returns {Promise<Buffer>} - The adjusted image buffer.
+     */
+    async setPatternBackground(buffer, options) {
+        // Load the buffered image onto a canvas
+        const img = await (0, canvas_1.loadImage)(buffer);
+        const canvas = (0, canvas_1.createCanvas)(img.width, img.height);
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        // Set up the area to cover (default to full image if not specified)
+        const x = options.x || 0;
+        const y = options.y || 0;
+        const width = options.width || img.width;
+        const height = options.height || img.height;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x, y, width, height);
+        ctx.clip();
+        if (options.gradient) {
+            await this.fillWithGradient(ctx, width, height, options.gradient, x, y);
+        }
+        else if (options.backgroundColor) {
+            ctx.fillStyle = options.backgroundColor;
+            ctx.fillRect(x, y, width, height);
+        }
+        switch (options.type) {
+            case 'dots':
+                await this.drawDotsPattern(ctx, width, height, options, x, y);
+                break;
+            case 'stripes':
+                await this.drawStripesPattern(ctx, width, height, options, x, y);
+                break;
+            case 'grid':
+                await this.drawGridPattern(ctx, width, height, options, x, y);
+                break;
+            case 'checkerboard':
+                await this.drawCheckerboardPattern(ctx, width, height, options, x, y);
+                break;
+            case 'custom':
+                await this.drawCustomPattern(ctx, width, height, options, x, y);
+                break;
+            default:
+                throw new Error('Invalid pattern type specified.');
+        }
+        ctx.restore();
+        return canvas.toBuffer('image/png');
+    }
+    /**
+     * Fills the specified area with a gradient.
+     * @param ctx The rendering context of the canvas.
+     * @param width The width of the area to fill.
+     * @param height The height of the area to fill.
+     * @param gradient The gradient options.
+     * @param x The x offset of the area.
+     * @param y The y offset of the area.
+     */
+    async fillWithGradient(ctx, width, height, gradient, x = 0, y = 0) {
+        let grad;
+        if (gradient.type === 'linear') {
+            grad = ctx.createLinearGradient((gradient.startX || 0) + x, (gradient.startY || 0) + y, (gradient.endX || width) + x, (gradient.endY || height) + y);
+        }
+        else {
+            grad = ctx.createRadialGradient((gradient.startX || width / 2) + x, (gradient.startY || height / 2) + y, gradient.startRadius || 0, (gradient.endX || width / 2) + x, (gradient.endY || height / 2) + y, gradient.endRadius || Math.max(width, height));
+        }
+        gradient.colors.forEach(stop => {
+            grad.addColorStop(stop.stop, stop.color);
+        });
+        ctx.fillStyle = grad;
+        ctx.fillRect(x, y, width, height);
+    }
+    /**
+     * Draws a dots pattern in the specified area.
+     * @param ctx The rendering context of the canvas.
+     * @param width The width of the area.
+     * @param height The height of the area.
+     * @param options Options to customize the dot pattern.
+     * @param x The x offset of the area.
+     * @param y The y offset of the area.
+     */
+    async drawDotsPattern(ctx, width, height, options, x = 0, y = 0) {
+        const color = options.color || 'black';
+        const radius = options.size || 5;
+        const spacing = options.spacing || 10;
+        ctx.fillStyle = color;
+        for (let posY = y; posY < y + height; posY += spacing) {
+            for (let posX = x; posX < x + width; posX += spacing) {
+                ctx.beginPath();
+                ctx.arc(posX, posY, radius, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+    }
+    /**
+     * Draws a stripes pattern in the specified area.
+     * @param ctx The rendering context of the canvas.
+     * @param width The width of the area.
+     * @param height The height of the area.
+     * @param options Options to customize the stripes pattern.
+     * @param x The x offset of the area.
+     * @param y The y offset of the area.
+     */
+    async drawStripesPattern(ctx, width, height, options, x = 0, y = 0) {
+        const color = options.color || 'black';
+        const stripeWidth = options.size || 10;
+        const spacing = options.spacing || 20;
+        const angle = options.angle || 0;
+        ctx.fillStyle = color;
+        // Save the context to apply transformations and restore later
+        ctx.save();
+        // Translate and rotate the canvas
+        ctx.translate(x + width / 2, y + height / 2); // Move to the center of the area
+        ctx.rotate((angle * Math.PI) / 180); // Rotate by the specified angle
+        ctx.translate(-width / 2, -height / 2); // Translate back to top-left
+        // Draw the stripes pattern with the current transformations
+        for (let posX = 0; posX < width; posX += stripeWidth + spacing) {
+            ctx.fillRect(posX, 0, stripeWidth, height);
+        }
+        // Restore the original context to prevent transformations affecting other drawings
+        ctx.restore();
+    }
+    /**
+   * Draws a grid pattern in the specified area.
+   * @param ctx The rendering context of the canvas.
+   * @param width The width of the area.
+   * @param height The height of the area.
+   * @param options Options to customize the grid pattern.
+   * @param x The x offset of the area.
+   * @param y The y offset of the area.
+   */
+    async drawGridPattern(ctx, width, height, options, x = 0, y = 0) {
+        const color = options.color || 'black';
+        const size = options.size || 20;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 1;
+        for (let posX = x; posX <= x + width; posX += size) {
+            ctx.beginPath();
+            ctx.moveTo(posX, y);
+            ctx.lineTo(posX, y + height);
+            ctx.stroke();
+        }
+        for (let posY = y; posY <= y + height; posY += size) {
+            ctx.beginPath();
+            ctx.moveTo(x, posY);
+            ctx.lineTo(x + width, posY);
+            ctx.stroke();
+        }
+    }
+    /**
+     * Draws a checkerboard pattern in the specified area.
+     * @param ctx The rendering context of the canvas.
+     * @param width The width of the area.
+     * @param height The height of the area.
+     * @param options Options to customize the checkerboard pattern.
+     * @param x The x offset of the area.
+     * @param y The y offset of the area.
+     */
+    async drawCheckerboardPattern(ctx, width, height, options, x = 0, y = 0) {
+        const color1 = options.color || 'black';
+        const color2 = options.secondaryColor || 'white';
+        const size = options.size || 20;
+        for (let posY = y; posY < y + height; posY += size) {
+            for (let posX = x; posX < x + width; posX += size) {
+                ctx.fillStyle = (Math.floor(posX / size) + Math.floor(posY / size)) % 2 === 0 ? color1 : color2;
+                ctx.fillRect(posX, posY, size, size);
+            }
+        }
+    }
+    /**
+     * Draws a custom image pattern in the specified area.
+     * @param ctx The rendering context of the canvas.
+     * @param width The width of the area.
+     * @param height The height of the area.
+     * @param options Options to customize the custom pattern.
+     * @param x The x offset of the area.
+     * @param y The y offset of the area.
+     */
+    async drawCustomPattern(ctx, width, height, options, x = 0, y = 0) {
+        if (!options.customPatternImage) {
+            throw new Error('Custom pattern image path is required for custom patterns.');
+        }
+        const patternImage = await (0, canvas_1.loadImage)(options.customPatternImage);
+        const pattern = ctx.createPattern(patternImage, 'repeat');
+        ctx.fillStyle = pattern;
+        ctx.translate(x, y);
+        ctx.fillRect(0, 0, width, height);
+        ctx.resetTransform();
+    }
+    async animate(frames, defaultDuration, defaultWidth = 800, defaultHeight = 600, options) {
+        const buffers = [];
+        const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
+        if (options?.onStart)
+            options.onStart();
+        let encoder = null;
+        let gifStream = null;
+        if (options?.gif) {
+            if (!options.gifPath) {
+                throw new Error("GIF generation enabled but no gifPath provided.");
+            }
+            encoder = new gifencoder_1.default(defaultWidth, defaultHeight);
+            gifStream = fs_1.default.createWriteStream(options.gifPath);
+            encoder.createReadStream().pipe(gifStream);
+            encoder.start();
+            encoder.setRepeat(0);
+            encoder.setQuality(10);
+        }
+        for (let i = 0; i < frames.length; i++) {
+            const frame = frames[i];
+            const width = frame.width || defaultWidth;
+            const height = frame.height || defaultHeight;
+            const canvas = (0, canvas_1.createCanvas)(width, height);
+            const ctx = canvas.getContext('2d');
+            if (!isNode) {
+                canvas.width = width;
+                canvas.height = height;
+                document.body.appendChild(canvas);
+            }
+            ctx.clearRect(0, 0, width, height);
+            if (frame.transformations) {
+                const { scaleX = 1, scaleY = 1, rotate = 0, translateX = 0, translateY = 0 } = frame.transformations;
+                ctx.save();
+                ctx.translate(translateX, translateY);
+                ctx.rotate((rotate * Math.PI) / 180);
+                ctx.scale(scaleX, scaleY);
+            }
+            let fillStyle = null;
+            if (frame.gradient) {
+                const { type, startX, startY, endX, endY, startRadius, endRadius, colors } = frame.gradient;
+                let gradient = null;
+                if (type === 'linear') {
+                    gradient = ctx.createLinearGradient(startX || 0, startY || 0, endX || width, endY || height);
+                }
+                else if (type === 'radial') {
+                    gradient = ctx.createRadialGradient(startX || width / 2, startY || height / 2, startRadius || 0, endX || width / 2, endY || height / 2, endRadius || Math.max(width, height));
+                }
+                colors.forEach(colorStop => {
+                    if (gradient)
+                        gradient.addColorStop(colorStop.stop, colorStop.color);
+                });
+                fillStyle = gradient;
+            }
+            if (frame.pattern) {
+                const patternImage = await (0, canvas_1.loadImage)(frame.pattern.imagePath);
+                const pattern = ctx.createPattern(patternImage, frame.pattern.repeat || 'repeat');
+                fillStyle = pattern;
+            }
+            if (!fillStyle && frame.backgroundColor) {
+                fillStyle = frame.backgroundColor;
+            }
+            if (fillStyle) {
+                ctx.fillStyle = fillStyle;
+                ctx.fillRect(0, 0, width, height);
+            }
+            if (frame.imagePath) {
+                const image = await (0, canvas_1.loadImage)(frame.imagePath);
+                ctx.globalCompositeOperation = frame.blendMode || 'source-over';
+                ctx.drawImage(image, 0, 0, width, height);
+            }
+            if (frame.onDrawCustom) {
+                frame.onDrawCustom(ctx, canvas);
+            }
+            if (frame.transformations) {
+                ctx.restore();
+            }
+            const buffer = canvas.toBuffer('image/png');
+            buffers.push(buffer);
+            if (encoder) {
+                const frameDuration = frame.duration || defaultDuration;
+                encoder.setDelay(frameDuration);
+                encoder.addFrame(ctx);
+            }
+            if (options?.onFrame)
+                options.onFrame(i);
+            await new Promise(resolve => setTimeout(resolve, frame.duration || defaultDuration));
+        }
+        if (encoder) {
+            encoder.finish();
+        }
+        if (options?.onEnd)
+            options.onEnd();
+        return options?.gif ? undefined : buffers;
+    }
     validHex(hexColor) {
         const hexPattern = /^#[0-9a-fA-F]{6}$/;
         if (!hexPattern.test(hexColor)) {