apexify.js 4.9.26 → 4.9.28

package/README.md

@@ -1,66 +1,456 @@
-![Example Image](https://media.discordapp.net/attachments/1134572786262736996/1225196690634575922/Picsart_24-04-04_00-34-02-123.png?ex=66204056&is=660dcb56&hm=b88fefc90afda1db45b18e65ee2e3cfe8ce6eb8b6807ea4a6bc84137aa3c3034&=&format=webp&quality=lossless&width=662&height=662)
+# 🎨 ApexPainter - Advanced Canvas Rendering Library
 
-### Jedi-Studio Introduce
+<div align="center">
 
-Greetings everyone! 🌟 If you encounter any issues or need assistance, feel free to reach out. Direct message me on Discord at `elioo.79` (ID: 1130583393176920095).
+![ApexPainter Banner](apex-banner.png)
 
-## 🚀 Usage Guidelines
+**The Ultimate TypeScript Canvas Library for Node.js**
 
-### 🤖 AI Chat & Imagine
+[![npm version](https://badge.fury.io/js/apexify.svg)](https://badge.fury.io/js/apexify)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-16%2B-green.svg)](https://nodejs.org/)
+[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-**Features:**
+*Create stunning visuals with professional-grade canvas rendering, image processing, and text effects*
 
-- **Chat Bot:** Engage in conversations with an AI-powered chatbot.
-- **AI Chat Bot:** Experience advanced conversational capabilities with our state-of-the-art AI chatbot.
-- **Image Generator:** Generate images using cutting-edge AI algorithms.
-- **Image Analysis:** Analyze images with AI for insights and understanding.
-- **PDF & Text Reader:** Effortlessly extract text from PDF files or other documents.
-- **Text to Speech:** Convert text into natural-sounding speech with high-quality synthesis.
-- **Speech to Text:** Transcribe spoken words into text with high accuracy.
-- **Text Extractor:** Extract and process text from various sources and formats.
-- **Custom Role Plays:** Create and engage in custom role-playing scenarios with tailored AI responses.
-- **AI Personality:** Personalize your interactions with the AI chatbot by defining its personality traits and characteristics.
-- **Chat Memory:** Enable the AI chatbot to remember past interactions and maintain context across conversations, providing a more personalized and coherent experience.
+</div>
 
-### 📸 Canvas Image Manipulation Toolkit 🎨
+## ✨ Features Overview
 
-**Features:**
+### 🖼️ **Advanced Image Processing**
+- **Professional Filters**: 22+ filters including blur, sharpen, vintage, cinematic effects
+- **Shape Drawing**: 8+ shapes (rectangle, circle, heart, star, polygon, etc.)
+- **Gradient Support**: Linear and radial gradients for fills and strokes
+- **Shadow & Stroke Effects**: Customizable shadows and strokes for all shapes
+- **Rotation & Positioning**: Full control over image placement and rotation
 
-- **Background Configuration:** Customize canvas background settings.
-- **Image/Shapes/Custom Drawing:** Configure images, shapes, and custom drawings on the canvas.
-- **Text Addition:** Add text to backgrounds or images with configurable settings.
-- **Custom Drawing:** Freely draw on the canvas using lines and coordinates.
-- **Filters:** Apply color and effects filters to images.
-- **GIF Creation:** Generate GIFs from a series of images.
-- **Resizing and Format Conversion:** Resize images and convert between different file formats.
-- **Charts Generation:** Create pie charts, bar charts, and line charts using provided data.
-- **Background Removal:** Effortlessly remove backgrounds from images.
-- **Color Detection:** Detect colors within images.
-- **Color Removal:** Remove specific colors from images using RGB values.
-- **Image Cropping:** Crop images with flexibility and customization options.
+### 🎨 **Rich Background System**
+- **Multiple Background Types**: Solid colors, gradients, custom images
+- **Pattern Overlays**: 12+ built-in patterns (grid, dots, stripes, hexagons, etc.)
+- **Custom Patterns**: Use your own images as repeating patterns
+- **Blend Modes**: 11+ blend modes for professional compositing
+- **Noise Effects**: Add texture with customizable noise intensity
 
-## For Further Usage Of ApexPainter
+### 📝 **Enhanced Text Rendering**
+- **Font Management**: Custom fonts, sizes, families, and styles
+- **Text Decorations**: Bold, italic, underline, overline, strikethrough, highlight
+- **Advanced Effects**: Glow, shadow, stroke with gradient support
+- **Spacing Control**: Letter spacing, word spacing, line height
+- **Text Wrapping**: Automatic text wrapping with size constraints
+- **Rotation**: Full 360° text rotation support
 
-- Further Usages: Creating charts, custom drawings, custom cropping, and GIF creation using ApexPainter.
-- Please refer to our documentation website for further details and explanations.
-- Check the example folder for information and usage on charts.
+### 🔧 **Professional Tools**
+- **Chart Generation**: Bar charts, pie charts, line charts
+- **GIF Creation**: Animated GIFs from image sequences
+- **Format Conversion**: Convert between PNG, JPEG, WebP, and more
+- **Image Manipulation**: Crop, resize, background removal
+- **Color Detection**: Extract and analyze colors from images
 
-## 📚 More Info & Documentation 📖
+---
 
-- Explore a detailed list of Apexify.js and their usage at our [Support Server](https://discord.gg/mDyXV9hzXw) or at [Apexify.js Docs](http://apexifyjs.jedi-studio.com).
+## 🚀 Quick Start
 
-Keep experimenting, and feel free to contact me for assistance! Suggestions and adjustments are welcome 🌟.
+### Installation
 
-## 🤝 Contributions
+```bash
+npm install apexify
+```
 
-**We welcome contributions! If you have any suggestions, bug reports, or feature requests, please contact us on Discord at `Jedi Studio`.**
+### Basic Usage
 
-- Regarding ApiKeys: The servers below as FresedGPT & ElectronHub are the servers where you can purchase/get apiKeys, we would like to see you there.
+```typescript
+import { ApexPainter } from 'apexify';
 
-### Join Us on Discord
+const painter = new ApexPainter();
 
-[![Jedi Studio](https://api.weblutions.com/discord/invite/CS2NRSPyze/)](https://discord.gg/CS2NRSPyze)  
-[![FresedGPT](https://api.weblutions.com/discord/invite/94qUZWhwFE/)](https://discord.gg/94qUZWhwFE)  
-[![ElectronHub](https://api.weblutions.com/discord/invite/83XcjD8vgW/)](https://discord.gg/83XcjD8vgW)  
-[![Ethical Programming](https://api.weblutions.com/discord/invite/ethical-programmer-s-1188398653530984539/)](https://discord.gg/ethical-programmer-s-1188398653530984539)  
-[![ExtraCodes](https://api.weblutions.com/discord/invite/extracodes/)](https://discord.gg/extracodes)
+// Create a canvas with gradient background
+const canvas = await painter.createCanvas({
+  width: 800,
+  height: 600,
+  gradientBg: {
+    type: 'linear',
+    colors: [
+      { color: '#FF6B6B', position: 0 },
+      { color: '#4ECDC4', position: 0.5 },
+      { color: '#45B7D1', position: 1 }
+    ],
+    direction: { x1: 0, y1: 0, x2: 800, y2: 600 }
+  },
+  shadow: {
+    color: '#000',
+    offsetX: 10,
+    offsetY: 10,
+    blur: 20
+  },
+  borderRadius: 20
+});
+
+// Add a beautiful heart shape (single object)
+const heartImage = await painter.createImage({
+  source: 'heart',
+  x: 300,
+  y: 200,
+  width: 200,
+  height: 200,
+  shape: {
+    fill: true,
+    gradient: {
+      type: 'radial',
+      colors: [
+        { color: '#FF6B6B', position: 0 },
+        { color: '#FF1744', position: 1 }
+      ],
+      center: { x: 100, y: 100 },
+      radius: 100
+    }
+  },
+  shadow: {
+    color: '#000',
+    offsetX: 15,
+    offsetY: 15,
+    blur: 25
+  },
+  stroke: {
+    color: '#FFF',
+    width: 5
+  }
+}, canvas.buffer);
+
+// Add stunning text (single object)
+const textImage = await painter.createText({
+  text: 'ApexPainter',
+  x: 400,
+  y: 450,
+  fontSize: 48,
+  fontFamily: 'Arial',
+  bold: true,
+  gradient: {
+    type: 'linear',
+    colors: [
+      { color: '#FFD700', position: 0 },
+      { color: '#FF6B6B', position: 1 }
+    ],
+    direction: { x1: 0, y1: 0, x2: 300, y2: 0 }
+  },
+  glow: {
+    color: '#FFD700',
+    intensity: 0.8,
+    opacity: 0.9
+  },
+  shadow: {
+    color: '#000',
+    offsetX: 8,
+    offsetY: 8,
+    blur: 15
+  },
+  stroke: {
+    color: '#FFF',
+    width: 3
+  }
+}, heartImage);
+
+// Save the result
+fs.writeFileSync('beautiful-artwork.png', textImage);
+```
+
+### 📝 **Flexible Array Support**
+
+Both `createImage()` and `createText()` methods accept **single objects** OR **arrays of objects**:
+
+```typescript
+// ✅ Single Object
+await painter.createImage({
+  source: 'heart',
+  x: 100, y: 100,
+  width: 200, height: 200,
+  shape: { fill: true, color: '#ff6b6b' }
+}, canvasBuffer);
+
+// ✅ Array of Objects
+await painter.createImage([
+  {
+    source: 'rectangle',
+    x: 50, y: 50,
+    width: 100, height: 80,
+    shape: { fill: true, color: '#ff6b6b' }
+  },
+  {
+    source: 'circle',
+    x: 200, y: 50,
+    width: 80, height: 80,
+    shape: { fill: true, color: '#4ecdc4' }
+  },
+  {
+    source: 'star',
+    x: 350, y: 50,
+    width: 80, height: 80,
+    shape: { fill: true, color: '#45b7d1' }
+  }
+], canvasBuffer);
+
+// ✅ Single Text Object
+await painter.createText({
+  text: 'Hello World',
+  x: 100, y: 100,
+  fontSize: 24,
+  color: '#ff6b6b'
+}, canvasBuffer);
+
+// ✅ Array of Text Objects
+await painter.createText([
+  {
+    text: 'Title',
+    x: 100, y: 50,
+    fontSize: 32,
+    bold: true,
+    color: '#2c3e50'
+  },
+  {
+    text: 'Subtitle',
+    x: 100, y: 100,
+    fontSize: 18,
+    color: '#666'
+  },
+  {
+    text: 'Body text with effects',
+    x: 100, y: 150,
+    fontSize: 14,
+    color: '#333',
+    glow: { color: '#ffd700', intensity: 0.5 },
+    shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
+  }
+], canvasBuffer);
+```
+
+---
+
+## 🎯 Real-World Examples
+
+### 🏢 **Business Cards & Marketing Materials**
+
+```typescript
+// Create a professional business card
+const businessCard = await painter.createCanvas({
+  width: 400,
+  height: 250,
+  gradientBg: {
+    type: 'linear',
+    colors: [
+      { color: '#2C3E50', position: 0 },
+      { color: '#34495E', position: 1 }
+    ],
+    direction: { x1: 0, y1: 0, x2: 400, y2: 250 }
+  },
+  patternBg: {
+    type: 'dots',
+    color: '#FFF',
+    opacity: 0.1,
+    size: 5,
+    spacing: 20
+  }
+});
+
+// Add company logo (star shape)
+const logo = await painter.createImage({
+  source: 'star',
+  x: 50,
+  y: 50,
+  width: 60,
+  height: 60,
+  fill: true,
+  color: '#FFD700',
+  shadow: { color: '#000', offsetX: 3, offsetY: 3, blur: 8 }
+}, businessCard.buffer);
+
+// Add company name
+const companyText = await painter.createText({
+  text: 'ACME Corp',
+  x: 130,
+  y: 80,
+  fontSize: 24,
+  fontFamily: 'Arial',
+  bold: true,
+  color: '#FFF',
+  shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
+}, logo);
+
+// Add contact info
+const contactText = await painter.createText({
+  text: 'john@acme.com\n+1 (555) 123-4567',
+  x: 50,
+  y: 150,
+  fontSize: 14,
+  fontFamily: 'Arial',
+  color: '#BDC3C7',
+  lineHeight: 1.5
+}, companyText);
+```
+
+### 🎮 **Game UI Elements**
+
+```typescript
+// Create a game button
+const gameButton = await painter.createCanvas({
+  width: 200,
+  height: 60,
+  gradientBg: {
+    type: 'linear',
+    colors: [
+      { color: '#FF6B6B', position: 0 },
+      { color: '#FF1744', position: 1 }
+    ],
+    direction: { x1: 0, y1: 0, x2: 200, y2: 60 }
+  },
+  shadow: {
+    color: '#000',
+    offsetX: 5,
+    offsetY: 5,
+    blur: 15
+  },
+  borderRadius: 30
+});
+
+// Add button text with glow effect
+const buttonText = await painter.createText({
+  text: 'PLAY NOW',
+  x: 100,
+  y: 35,
+  fontSize: 20,
+  fontFamily: 'Arial',
+  bold: true,
+  color: '#FFF',
+  textAlign: 'center',
+  textBaseline: 'middle',
+  glow: {
+    color: '#FFD700',
+    intensity: 0.6,
+    opacity: 0.8
+  },
+  shadow: {
+    color: '#000',
+    offsetX: 2,
+    offsetY: 2,
+    blur: 4
+  }
+}, gameButton.buffer);
+```
+
+---
+
+## 📚 API Reference
+
+### Core Methods
+
+| Method | Description | Parameters |
+|--------|-------------|------------|
+| `createCanvas()` | Create a new canvas with background | `CanvasConfig` |
+| `createImage()` | Add shapes/images to canvas | `ImageProperties \| ImageProperties[]` |
+| `createText()` | Add text to canvas | `TextProperties \| TextProperties[]` |
+| `createChart()` | Generate charts | `ChartConfig` |
+| `createGIF()` | Create animated GIFs | `GIFConfig` |
+
+### 🔄 **Flexible Parameters**
+
+Both `createImage()` and `createText()` methods accept:
+- **Single Object**: `ImageProperties` or `TextProperties`
+- **Array of Objects**: `ImageProperties[]` or `TextProperties[]`
+
+This allows you to add multiple elements in one call for better performance and cleaner code.
+
+### Shape Types
+
+- `rectangle` - Standard rectangle
+- `square` - Perfect square
+- `circle` - Perfect circle
+- `triangle` - Equilateral triangle
+- `trapezium` - Trapezoid shape
+- `star` - 5-pointed star
+- `heart` - Heart shape with bezier curves
+- `polygon` - Custom polygon
+
+### Pattern Types
+
+- `grid` - Grid pattern
+- `dots` - Dot pattern
+- `diagonal` - Diagonal lines
+- `stripes` - Horizontal/vertical stripes
+- `waves` - Wave pattern
+- `crosses` - Cross pattern
+- `hexagons` - Hexagonal pattern
+- `checkerboard` - Checkerboard pattern
+- `diamonds` - Diamond pattern
+- `triangles` - Triangle pattern
+- `stars` - Star pattern
+- `polka` - Polka dot pattern
+- `custom` - Custom image pattern
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Here's how you can help:
+
+1. **Report Bugs**: Found a bug? Open an issue with detailed information
+2. **Feature Requests**: Have an idea? We'd love to hear it!
+3. **Code Contributions**: Submit pull requests for improvements
+4. **Documentation**: Help improve our docs and examples
+
+### Development Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/apexify.git
+
+# Install dependencies
+npm install
+
+# Run tests
+npm test
+
+# Build the project
+npm run build
+```
+
+---
+
+## 📞 Support & Community
+
+<div align="center">
+
+### Join Our Discord Community
+
+[![Jedi Studio](https://img.shields.io/badge/Discord-Jedi%20Studio-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/CS2NRSPyze)
+[![FresedGPT](https://img.shields.io/badge/Discord-FresedGPT-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/94qUZWhwFE)
+[![ElectronHub](https://img.shields.io/badge/Discord-ElectronHub-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/83XcjD8vgW)
+
+### Documentation & Resources
+
+[![Documentation](https://img.shields.io/badge/Docs-Apexify.js-blue?style=for-the-badge)](http://apexifyjs.jedi-studio.com)
+[![Support Server](https://img.shields.io/badge/Support-Discord-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/mDyXV9hzXw)
+
+</div>
+
+---
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+## 🙏 Acknowledgments
+
+- **@napi-rs/canvas** - High-performance canvas rendering
+- **Sharp** - Professional image processing
+- **Jimp** - JavaScript image manipulation
+- **TypeScript** - Type-safe development
+
+---
+
+<div align="center">
+
+**Made with ❤️ by [Jedi Studio](https://discord.gg/CS2NRSPyze)**
+
+*Create stunning visuals with ApexPainter - The ultimate canvas library for Node.js*
+
+</div>