apexify.js 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (236) hide show
  1. package/CHANGELOG.md +240 -0
  2. package/README.md +248 -1105
  3. package/dist/cjs/Canvas/ApexPainter.d.ts +182 -204
  4. package/dist/cjs/Canvas/ApexPainter.d.ts.map +1 -1
  5. package/dist/cjs/Canvas/ApexPainter.js +482 -1286
  6. package/dist/cjs/Canvas/ApexPainter.js.map +1 -1
  7. package/dist/cjs/Canvas/extended/CanvasCreator.d.ts +33 -0
  8. package/dist/cjs/Canvas/extended/CanvasCreator.d.ts.map +1 -0
  9. package/dist/cjs/Canvas/extended/CanvasCreator.js +223 -0
  10. package/dist/cjs/Canvas/extended/CanvasCreator.js.map +1 -0
  11. package/dist/cjs/Canvas/extended/ChartCreator.d.ts +26 -0
  12. package/dist/cjs/Canvas/extended/ChartCreator.d.ts.map +1 -0
  13. package/dist/cjs/Canvas/extended/ChartCreator.js +50 -0
  14. package/dist/cjs/Canvas/extended/ChartCreator.js.map +1 -0
  15. package/dist/cjs/Canvas/extended/GIFCreator.d.ts +43 -0
  16. package/dist/cjs/Canvas/extended/GIFCreator.d.ts.map +1 -0
  17. package/dist/cjs/Canvas/extended/GIFCreator.js +157 -0
  18. package/dist/cjs/Canvas/extended/GIFCreator.js.map +1 -0
  19. package/dist/cjs/Canvas/extended/ImageCreator.d.ts +83 -0
  20. package/dist/cjs/Canvas/extended/ImageCreator.d.ts.map +1 -0
  21. package/dist/cjs/Canvas/extended/ImageCreator.js +479 -0
  22. package/dist/cjs/Canvas/extended/ImageCreator.js.map +1 -0
  23. package/dist/cjs/Canvas/extended/TextCreator.d.ts +35 -0
  24. package/dist/cjs/Canvas/extended/TextCreator.d.ts.map +1 -0
  25. package/dist/cjs/Canvas/extended/TextCreator.js +98 -0
  26. package/dist/cjs/Canvas/extended/TextCreator.js.map +1 -0
  27. package/dist/cjs/Canvas/extended/VideoCreator.d.ts +370 -0
  28. package/dist/cjs/Canvas/extended/VideoCreator.d.ts.map +1 -0
  29. package/dist/cjs/Canvas/extended/VideoCreator.js +478 -0
  30. package/dist/cjs/Canvas/extended/VideoCreator.js.map +1 -0
  31. package/dist/cjs/Canvas/utils/Background/bg.d.ts +1 -1
  32. package/dist/cjs/Canvas/utils/Background/bg.d.ts.map +1 -1
  33. package/dist/cjs/Canvas/utils/Background/bg.js +43 -7
  34. package/dist/cjs/Canvas/utils/Background/bg.js.map +1 -1
  35. package/dist/cjs/Canvas/utils/Charts/barchart.d.ts +230 -0
  36. package/dist/cjs/Canvas/utils/Charts/barchart.d.ts.map +1 -0
  37. package/dist/cjs/Canvas/utils/Charts/barchart.js +1891 -0
  38. package/dist/cjs/Canvas/utils/Charts/barchart.js.map +1 -0
  39. package/dist/cjs/Canvas/utils/Charts/comparisonchart.d.ts +103 -0
  40. package/dist/cjs/Canvas/utils/Charts/comparisonchart.d.ts.map +1 -0
  41. package/dist/cjs/Canvas/utils/Charts/comparisonchart.js +368 -0
  42. package/dist/cjs/Canvas/utils/Charts/comparisonchart.js.map +1 -0
  43. package/dist/cjs/Canvas/utils/Charts/horizontalbarchart.d.ts +178 -0
  44. package/dist/cjs/Canvas/utils/Charts/horizontalbarchart.d.ts.map +1 -0
  45. package/dist/cjs/Canvas/utils/Charts/horizontalbarchart.js +1389 -0
  46. package/dist/cjs/Canvas/utils/Charts/horizontalbarchart.js.map +1 -0
  47. package/dist/cjs/Canvas/utils/Charts/index.d.ts +45 -0
  48. package/dist/cjs/Canvas/utils/Charts/index.d.ts.map +1 -0
  49. package/dist/cjs/Canvas/utils/Charts/index.js +17 -0
  50. package/dist/cjs/Canvas/utils/Charts/index.js.map +1 -0
  51. package/dist/cjs/Canvas/utils/Charts/linechart.d.ts +216 -0
  52. package/dist/cjs/Canvas/utils/Charts/linechart.d.ts.map +1 -0
  53. package/dist/cjs/Canvas/utils/Charts/linechart.js +1761 -0
  54. package/dist/cjs/Canvas/utils/Charts/linechart.js.map +1 -0
  55. package/dist/cjs/Canvas/utils/Charts/piechart.d.ts +167 -0
  56. package/dist/cjs/Canvas/utils/Charts/piechart.d.ts.map +1 -0
  57. package/dist/cjs/Canvas/utils/Charts/piechart.js +794 -0
  58. package/dist/cjs/Canvas/utils/Charts/piechart.js.map +1 -0
  59. package/dist/cjs/Canvas/utils/General/batchOperations.d.ts.map +1 -1
  60. package/dist/cjs/Canvas/utils/General/batchOperations.js +3 -4
  61. package/dist/cjs/Canvas/utils/General/batchOperations.js.map +1 -1
  62. package/dist/cjs/Canvas/utils/General/general functions.d.ts.map +1 -1
  63. package/dist/cjs/Canvas/utils/General/general functions.js +62 -33
  64. package/dist/cjs/Canvas/utils/General/general functions.js.map +1 -1
  65. package/dist/cjs/Canvas/utils/General/imageStitching.d.ts.map +1 -1
  66. package/dist/cjs/Canvas/utils/General/imageStitching.js +3 -6
  67. package/dist/cjs/Canvas/utils/General/imageStitching.js.map +1 -1
  68. package/dist/cjs/Canvas/utils/Image/imageMasking.d.ts.map +1 -1
  69. package/dist/cjs/Canvas/utils/Image/imageMasking.js +5 -12
  70. package/dist/cjs/Canvas/utils/Image/imageMasking.js.map +1 -1
  71. package/dist/cjs/Canvas/utils/Image/imageProperties.d.ts +4 -4
  72. package/dist/cjs/Canvas/utils/Image/imageProperties.d.ts.map +1 -1
  73. package/dist/cjs/Canvas/utils/Image/imageProperties.js +44 -9
  74. package/dist/cjs/Canvas/utils/Image/imageProperties.js.map +1 -1
  75. package/dist/cjs/Canvas/utils/Texts/enhancedTextRenderer.d.ts +5 -0
  76. package/dist/cjs/Canvas/utils/Texts/enhancedTextRenderer.d.ts.map +1 -1
  77. package/dist/cjs/Canvas/utils/Texts/enhancedTextRenderer.js +48 -5
  78. package/dist/cjs/Canvas/utils/Texts/enhancedTextRenderer.js.map +1 -1
  79. package/dist/cjs/Canvas/utils/Texts/textProperties.d.ts +1 -1
  80. package/dist/cjs/Canvas/utils/Texts/textProperties.d.ts.map +1 -1
  81. package/dist/cjs/Canvas/utils/Texts/textProperties.js +48 -5
  82. package/dist/cjs/Canvas/utils/Texts/textProperties.js.map +1 -1
  83. package/dist/cjs/Canvas/utils/Video/videoHelpers.d.ts +489 -0
  84. package/dist/cjs/Canvas/utils/Video/videoHelpers.d.ts.map +1 -0
  85. package/dist/cjs/Canvas/utils/Video/videoHelpers.js +1835 -0
  86. package/dist/cjs/Canvas/utils/Video/videoHelpers.js.map +1 -0
  87. package/dist/cjs/Canvas/utils/errorUtils.d.ts +15 -0
  88. package/dist/cjs/Canvas/utils/errorUtils.d.ts.map +1 -0
  89. package/dist/cjs/Canvas/utils/errorUtils.js +26 -0
  90. package/dist/cjs/Canvas/utils/errorUtils.js.map +1 -0
  91. package/dist/cjs/Canvas/utils/types.d.ts +17 -178
  92. package/dist/cjs/Canvas/utils/types.d.ts.map +1 -1
  93. package/dist/cjs/Canvas/utils/types.js.map +1 -1
  94. package/dist/cjs/Canvas/utils/utils.d.ts +4 -3
  95. package/dist/cjs/Canvas/utils/utils.d.ts.map +1 -1
  96. package/dist/cjs/Canvas/utils/utils.js +40 -6
  97. package/dist/cjs/Canvas/utils/utils.js.map +1 -1
  98. package/dist/cjs/index.d.ts +1 -8
  99. package/dist/cjs/index.d.ts.map +1 -1
  100. package/dist/cjs/index.js +14 -45
  101. package/dist/cjs/index.js.map +1 -1
  102. package/dist/cjs/tsconfig.cjs.tsbuildinfo +1 -1
  103. package/dist/esm/Canvas/ApexPainter.d.ts +182 -204
  104. package/dist/esm/Canvas/ApexPainter.d.ts.map +1 -1
  105. package/dist/esm/Canvas/ApexPainter.js +482 -1286
  106. package/dist/esm/Canvas/ApexPainter.js.map +1 -1
  107. package/dist/esm/Canvas/extended/CanvasCreator.d.ts +33 -0
  108. package/dist/esm/Canvas/extended/CanvasCreator.d.ts.map +1 -0
  109. package/dist/esm/Canvas/extended/CanvasCreator.js +223 -0
  110. package/dist/esm/Canvas/extended/CanvasCreator.js.map +1 -0
  111. package/dist/esm/Canvas/extended/ChartCreator.d.ts +26 -0
  112. package/dist/esm/Canvas/extended/ChartCreator.d.ts.map +1 -0
  113. package/dist/esm/Canvas/extended/ChartCreator.js +50 -0
  114. package/dist/esm/Canvas/extended/ChartCreator.js.map +1 -0
  115. package/dist/esm/Canvas/extended/GIFCreator.d.ts +43 -0
  116. package/dist/esm/Canvas/extended/GIFCreator.d.ts.map +1 -0
  117. package/dist/esm/Canvas/extended/GIFCreator.js +157 -0
  118. package/dist/esm/Canvas/extended/GIFCreator.js.map +1 -0
  119. package/dist/esm/Canvas/extended/ImageCreator.d.ts +83 -0
  120. package/dist/esm/Canvas/extended/ImageCreator.d.ts.map +1 -0
  121. package/dist/esm/Canvas/extended/ImageCreator.js +479 -0
  122. package/dist/esm/Canvas/extended/ImageCreator.js.map +1 -0
  123. package/dist/esm/Canvas/extended/TextCreator.d.ts +35 -0
  124. package/dist/esm/Canvas/extended/TextCreator.d.ts.map +1 -0
  125. package/dist/esm/Canvas/extended/TextCreator.js +98 -0
  126. package/dist/esm/Canvas/extended/TextCreator.js.map +1 -0
  127. package/dist/esm/Canvas/extended/VideoCreator.d.ts +370 -0
  128. package/dist/esm/Canvas/extended/VideoCreator.d.ts.map +1 -0
  129. package/dist/esm/Canvas/extended/VideoCreator.js +478 -0
  130. package/dist/esm/Canvas/extended/VideoCreator.js.map +1 -0
  131. package/dist/esm/Canvas/utils/Background/bg.d.ts +1 -1
  132. package/dist/esm/Canvas/utils/Background/bg.d.ts.map +1 -1
  133. package/dist/esm/Canvas/utils/Background/bg.js +43 -7
  134. package/dist/esm/Canvas/utils/Background/bg.js.map +1 -1
  135. package/dist/esm/Canvas/utils/Charts/barchart.d.ts +230 -0
  136. package/dist/esm/Canvas/utils/Charts/barchart.d.ts.map +1 -0
  137. package/dist/esm/Canvas/utils/Charts/barchart.js +1891 -0
  138. package/dist/esm/Canvas/utils/Charts/barchart.js.map +1 -0
  139. package/dist/esm/Canvas/utils/Charts/comparisonchart.d.ts +103 -0
  140. package/dist/esm/Canvas/utils/Charts/comparisonchart.d.ts.map +1 -0
  141. package/dist/esm/Canvas/utils/Charts/comparisonchart.js +368 -0
  142. package/dist/esm/Canvas/utils/Charts/comparisonchart.js.map +1 -0
  143. package/dist/esm/Canvas/utils/Charts/horizontalbarchart.d.ts +178 -0
  144. package/dist/esm/Canvas/utils/Charts/horizontalbarchart.d.ts.map +1 -0
  145. package/dist/esm/Canvas/utils/Charts/horizontalbarchart.js +1389 -0
  146. package/dist/esm/Canvas/utils/Charts/horizontalbarchart.js.map +1 -0
  147. package/dist/esm/Canvas/utils/Charts/index.d.ts +45 -0
  148. package/dist/esm/Canvas/utils/Charts/index.d.ts.map +1 -0
  149. package/dist/esm/Canvas/utils/Charts/index.js +17 -0
  150. package/dist/esm/Canvas/utils/Charts/index.js.map +1 -0
  151. package/dist/esm/Canvas/utils/Charts/linechart.d.ts +216 -0
  152. package/dist/esm/Canvas/utils/Charts/linechart.d.ts.map +1 -0
  153. package/dist/esm/Canvas/utils/Charts/linechart.js +1761 -0
  154. package/dist/esm/Canvas/utils/Charts/linechart.js.map +1 -0
  155. package/dist/esm/Canvas/utils/Charts/piechart.d.ts +167 -0
  156. package/dist/esm/Canvas/utils/Charts/piechart.d.ts.map +1 -0
  157. package/dist/esm/Canvas/utils/Charts/piechart.js +794 -0
  158. package/dist/esm/Canvas/utils/Charts/piechart.js.map +1 -0
  159. package/dist/esm/Canvas/utils/General/batchOperations.d.ts.map +1 -1
  160. package/dist/esm/Canvas/utils/General/batchOperations.js +3 -4
  161. package/dist/esm/Canvas/utils/General/batchOperations.js.map +1 -1
  162. package/dist/esm/Canvas/utils/General/general functions.d.ts.map +1 -1
  163. package/dist/esm/Canvas/utils/General/general functions.js +62 -33
  164. package/dist/esm/Canvas/utils/General/general functions.js.map +1 -1
  165. package/dist/esm/Canvas/utils/General/imageStitching.d.ts.map +1 -1
  166. package/dist/esm/Canvas/utils/General/imageStitching.js +3 -6
  167. package/dist/esm/Canvas/utils/General/imageStitching.js.map +1 -1
  168. package/dist/esm/Canvas/utils/Image/imageMasking.d.ts.map +1 -1
  169. package/dist/esm/Canvas/utils/Image/imageMasking.js +5 -12
  170. package/dist/esm/Canvas/utils/Image/imageMasking.js.map +1 -1
  171. package/dist/esm/Canvas/utils/Image/imageProperties.d.ts +4 -4
  172. package/dist/esm/Canvas/utils/Image/imageProperties.d.ts.map +1 -1
  173. package/dist/esm/Canvas/utils/Image/imageProperties.js +44 -9
  174. package/dist/esm/Canvas/utils/Image/imageProperties.js.map +1 -1
  175. package/dist/esm/Canvas/utils/Texts/enhancedTextRenderer.d.ts +5 -0
  176. package/dist/esm/Canvas/utils/Texts/enhancedTextRenderer.d.ts.map +1 -1
  177. package/dist/esm/Canvas/utils/Texts/enhancedTextRenderer.js +48 -5
  178. package/dist/esm/Canvas/utils/Texts/enhancedTextRenderer.js.map +1 -1
  179. package/dist/esm/Canvas/utils/Texts/textProperties.d.ts +1 -1
  180. package/dist/esm/Canvas/utils/Texts/textProperties.d.ts.map +1 -1
  181. package/dist/esm/Canvas/utils/Texts/textProperties.js +48 -5
  182. package/dist/esm/Canvas/utils/Texts/textProperties.js.map +1 -1
  183. package/dist/esm/Canvas/utils/Video/videoHelpers.d.ts +489 -0
  184. package/dist/esm/Canvas/utils/Video/videoHelpers.d.ts.map +1 -0
  185. package/dist/esm/Canvas/utils/Video/videoHelpers.js +1835 -0
  186. package/dist/esm/Canvas/utils/Video/videoHelpers.js.map +1 -0
  187. package/dist/esm/Canvas/utils/errorUtils.d.ts +15 -0
  188. package/dist/esm/Canvas/utils/errorUtils.d.ts.map +1 -0
  189. package/dist/esm/Canvas/utils/errorUtils.js +26 -0
  190. package/dist/esm/Canvas/utils/errorUtils.js.map +1 -0
  191. package/dist/esm/Canvas/utils/types.d.ts +17 -178
  192. package/dist/esm/Canvas/utils/types.d.ts.map +1 -1
  193. package/dist/esm/Canvas/utils/types.js.map +1 -1
  194. package/dist/esm/Canvas/utils/utils.d.ts +4 -3
  195. package/dist/esm/Canvas/utils/utils.d.ts.map +1 -1
  196. package/dist/esm/Canvas/utils/utils.js +40 -6
  197. package/dist/esm/Canvas/utils/utils.js.map +1 -1
  198. package/dist/esm/index.d.ts +1 -8
  199. package/dist/esm/index.d.ts.map +1 -1
  200. package/dist/esm/index.js +14 -45
  201. package/dist/esm/index.js.map +1 -1
  202. package/dist/esm/tsconfig.esm.tsbuildinfo +1 -1
  203. package/package.json +234 -198
  204. package/dist/cjs/Canvas/utils/Charts/charts.d.ts +0 -13
  205. package/dist/cjs/Canvas/utils/Charts/charts.d.ts.map +0 -1
  206. package/dist/cjs/Canvas/utils/Charts/charts.js +0 -466
  207. package/dist/cjs/Canvas/utils/Charts/charts.js.map +0 -1
  208. package/dist/esm/Canvas/utils/Charts/charts.d.ts +0 -13
  209. package/dist/esm/Canvas/utils/Charts/charts.d.ts.map +0 -1
  210. package/dist/esm/Canvas/utils/Charts/charts.js +0 -466
  211. package/dist/esm/Canvas/utils/Charts/charts.js.map +0 -1
  212. package/lib/Canvas/ApexPainter.ts +0 -5414
  213. package/lib/Canvas/utils/Background/bg.ts +0 -285
  214. package/lib/Canvas/utils/Charts/charts.ts +0 -548
  215. package/lib/Canvas/utils/Custom/advancedLines.ts +0 -387
  216. package/lib/Canvas/utils/Custom/customLines.ts +0 -206
  217. package/lib/Canvas/utils/General/batchOperations.ts +0 -103
  218. package/lib/Canvas/utils/General/conversion.ts +0 -34
  219. package/lib/Canvas/utils/General/general functions.ts +0 -726
  220. package/lib/Canvas/utils/General/imageCompression.ts +0 -316
  221. package/lib/Canvas/utils/General/imageStitching.ts +0 -252
  222. package/lib/Canvas/utils/Image/imageEffects.ts +0 -175
  223. package/lib/Canvas/utils/Image/imageFilters.ts +0 -356
  224. package/lib/Canvas/utils/Image/imageMasking.ts +0 -335
  225. package/lib/Canvas/utils/Image/imageProperties.ts +0 -587
  226. package/lib/Canvas/utils/Image/professionalImageFilters.ts +0 -391
  227. package/lib/Canvas/utils/Image/simpleProfessionalFilters.ts +0 -229
  228. package/lib/Canvas/utils/Patterns/enhancedPatternRenderer.ts +0 -455
  229. package/lib/Canvas/utils/Shapes/shapes.ts +0 -528
  230. package/lib/Canvas/utils/Texts/enhancedTextRenderer.ts +0 -716
  231. package/lib/Canvas/utils/Texts/textPathRenderer.ts +0 -320
  232. package/lib/Canvas/utils/Texts/textProperties.ts +0 -231
  233. package/lib/Canvas/utils/types.ts +0 -983
  234. package/lib/Canvas/utils/utils.ts +0 -135
  235. package/lib/index.ts +0 -81
  236. package/lib/utils.ts +0 -5
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # 🎨 ApexPainter - Advanced Canvas Rendering Library
1
+ # 🎨 Apexify.js - The Ultimate Canvas & Image Processing Library
2
2
 
3
3
  <div align="center">
4
4
 
5
- ![ApexPainter Banner](https://imgur.com/0E9GTmP)
5
+ ![Apexify.js Banner](https://imgur.com/0E9GTmP)
6
6
 
7
7
  **🚀 One Library. Infinite Possibilities. Professional Results.**
8
8
 
@@ -10,1195 +10,338 @@
10
10
  [![npm downloads](https://img.shields.io/npm/dt/apexify.js.svg)](https://www.npmjs.com/package/apexify.js)
11
11
  [![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
12
12
  [![Node.js](https://img.shields.io/badge/Node.js-16%2B-green.svg)](https://nodejs.org/)
13
- [![Next.js](https://img.shields.io/badge/Next.js-Compatible-black?logo=next.js)](https://nextjs.org/)
14
- [![Discord](https://img.shields.io/badge/Discord-Bot%20Ready-7289DA?logo=discord)](https://discord.com/)
15
13
  [![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
16
14
 
17
- **The most powerful, versatile canvas rendering library for Node.js, Next.js, Discord bots, and beyond.**
18
-
19
- *Create stunning visuals, generate images on-the-fly, build design tools, and power your applications with professional-grade canvas rendering and image processing.*
15
+ **The most powerful, all-in-one canvas rendering and image processing library for Node.js**
20
16
 
21
17
  </div>
22
18
 
23
- ## 🌟 Why ApexPainter?
24
-
25
- **ApexPainter is not just another canvas library** - it's a complete visual creation toolkit that works everywhere:
26
-
27
- - ✅ **Next.js** - Perfect for both frontend and backend image generation
28
- - ✅ **Discord Bots** - Create dynamic images, welcome cards, level-up cards, and more
29
- - ✅ **Server-Side Rendering** - Generate images in API routes, server actions, and edge functions
30
- - ✅ **Design Tools** - Build Photoshop-like applications with code export capabilities
31
- - ✅ **Web Applications** - Power your websites with dynamic image generation
32
- - ✅ **Automation** - Batch process images, create thumbnails, generate social media assets
33
- - ✅ **E-commerce** - Generate product images, banners, and marketing materials
34
- - ✅ **Social Media** - Create profile pictures, cover images, and post graphics
35
- - ✅ **Gaming** - Generate game assets, UI elements, and character cards
36
- - ✅ **Business** - Create business cards, certificates, and professional documents
37
-
38
- **One library. Every use case. Zero compromises.**
39
-
40
19
  ---
41
20
 
42
- ## 🎯 Perfect For
21
+ ## 🏆 Why Apexify.js is Better Than Everything Else
43
22
 
44
- ### 🚀 **Next.js Applications**
45
- Generate images in your Next.js app - both client and server-side. Perfect for:
46
- - **API Routes**: Generate images on-demand via API endpoints
47
- - **Server Actions**: Create images in server-side functions
48
- - **Static Generation**: Pre-generate images at build time
49
- - **Edge Functions**: Lightweight image generation at the edge
50
- - **ISR (Incremental Static Regeneration)**: Update images dynamically
23
+ ### **The Only Library That Does It All**
51
24
 
52
- ```typescript
53
- // Next.js API Route Example
54
- // app/api/generate-image/route.ts
55
- import { ApexPainter } from 'apexify.js';
56
- import { NextResponse } from 'next/server';
57
-
58
- export async function GET() {
59
- const painter = new ApexPainter();
60
- const canvas = await painter.createCanvas({
61
- width: 1200,
62
- height: 630,
63
- gradientBg: {
64
- type: 'linear',
65
- colors: [
66
- { stop: 0, color: '#667EEA' },
67
- { stop: 1, color: '#764BA2' }
68
- ]
69
- }
70
- });
71
- return new NextResponse(canvas.buffer, {
72
- headers: { 'Content-Type': 'image/png' }
73
- });
74
- }
75
- ```
25
+ While other libraries force you to install multiple packages for different tasks, **Apexify.js gives you everything in one place**:
76
26
 
77
- ### 🤖 **Discord Bots**
78
- Create stunning visuals for your Discord bot:
79
- - **Welcome Cards**: Personalized welcome images for new members
80
- - **Level-Up Cards**: Celebrate user achievements with custom graphics
81
- - **Profile Cards**: Generate user profile images with stats
82
- - **Leaderboards**: Visual leaderboard images
83
- - **Custom Commands**: Generate images on-demand via slash commands
84
- - **Event Graphics**: Create event banners and announcements
27
+ | Feature | Apexify.js | Other Libraries |
28
+ |---------|-----------|-----------------|
29
+ | **Canvas Rendering** | Built-in | Separate library needed |
30
+ | **Image Processing** | Built-in | Requires Sharp/Jimp |
31
+ | **Video Processing** | Built-in (33+ features) | ❌ Requires FFmpeg wrapper |
32
+ | **Chart Generation** | ✅ Built-in (6 chart types) | ❌ Requires Chart.js/Recharts |
33
+ | **GIF Creation** | Built-in | Separate library needed |
34
+ | **Text Rendering** | Advanced (gradients, paths, effects) | ❌ Basic only |
35
+ | **Shape Drawing** | ✅ Complex shapes (heart, star, custom) | ❌ Basic shapes only |
36
+ | **Batch Processing** | ✅ Built-in | ❌ Manual implementation |
37
+ | **TypeScript Support** | ✅ Full type safety | ⚠️ Partial or none |
38
+ | **Performance** | ✅ Rust-powered (@napi-rs) | ⚠️ JavaScript-only |
85
39
 
86
- ```typescript
87
- // Discord Bot Example (discord.js)
88
- import { ApexPainter } from 'apexify.js';
89
- import { AttachmentBuilder } from 'discord.js';
40
+ ### **Why Developers Choose Apexify.js**
90
41
 
91
- const painter = new ApexPainter();
92
- const canvas = await painter.createCanvas({
93
- width: 800,
94
- height: 400,
95
- customBg: { source: userAvatar },
96
- // Add welcome text, decorations, etc.
97
- });
42
+ **Zero Configuration** - Works out of the box, no complex setup
43
+ **TypeScript First** - Complete type definitions for everything
44
+ ✅ **Rust-Powered Performance** - Built on @napi-rs/canvas for blazing speed
45
+ **Modular Architecture** - Clean, maintainable codebase
46
+ **Comprehensive Features** - 200+ methods covering every use case
47
+ **Active Development** - Regular updates with new features
48
+ ✅ **Production Ready** - Used in production by thousands of projects
98
49
 
99
- const attachment = new AttachmentBuilder(canvas.buffer, { name: 'welcome.png' });
100
- await channel.send({ files: [attachment] });
101
- ```
50
+ ---
102
51
 
103
- ### 🎨 **Design Tools & Photoshop-Like Apps**
104
- Build powerful design applications:
105
- - **Visual Design Editors**: Create drag-and-drop design tools
106
- - **Code Export**: Convert visual designs into ApexPainter code
107
- - **Template Systems**: Pre-built templates for common designs
108
- - **Layer Management**: Complex compositions with multiple layers
109
- - **Export Options**: Multiple formats (PNG, JPEG, WebP, AVIF)
110
- - **Batch Processing**: Process multiple designs at once
52
+ ## 🎯 Where Apexify.js Shines
111
53
 
112
- ```typescript
113
- // Design Tool with Code Export
114
- const design = {
115
- canvas: { width: 1920, height: 1080, colorBg: '#ffffff' },
116
- elements: [
117
- { type: 'shape', source: 'rectangle', x: 100, y: 100, /* ... */ },
118
- { type: 'text', text: 'Hello World', x: 200, y: 200, /* ... */ }
119
- ]
120
- };
121
-
122
- // Generate code from design
123
- const code = generateApexPainterCode(design);
124
- // Export as: await painter.createCanvas(...)
125
- ```
54
+ ### **Perfect For:**
126
55
 
127
- ### 🌐 **Web Applications**
128
- Power your websites with dynamic image generation:
129
- - **OG Images**: Generate Open Graph images for social sharing
130
- - **Thumbnails**: Auto-generate thumbnails for content
131
- - **Banners**: Create dynamic banners and headers
132
- - **User Avatars**: Generate custom avatars with initials
133
- - **Charts & Graphs**: Visualize data with beautiful charts
134
- - **QR Codes**: Generate QR codes with custom styling
135
-
136
- ### 📱 **Social Media & Marketing**
137
- Create professional marketing materials:
138
- - **Social Media Posts**: Generate posts for Instagram, Twitter, Facebook
139
- - **Story Graphics**: Create engaging story images
140
- - **Banner Ads**: Design eye-catching banner advertisements
141
- - **Email Graphics**: Generate images for email campaigns
142
- - **Product Images**: Create product showcases and catalogs
143
-
144
- ### 🎮 **Gaming Applications**
145
- Generate game assets and UI elements:
146
- - **Character Cards**: Create character profile cards
147
- - **Achievement Badges**: Design achievement and trophy graphics
148
- - **Game UI**: Generate UI elements and HUD components
149
- - **Loading Screens**: Create dynamic loading screen graphics
150
- - **Leaderboards**: Visual leaderboard displays
56
+ - 🚀 **Next.js Applications** - Server-side image generation, API routes, ISR
57
+ - 🤖 **Discord Bots** - Welcome cards, level-up graphics, profile images
58
+ - 🛒 **E-commerce** - Product image generation, banners, marketing materials
59
+ - 📱 **Social Media** - Profile pictures, cover images, post graphics
60
+ - 🎮 **Gaming** - Game assets, UI elements, character cards
61
+ - 💼 **Business** - Business cards, certificates, professional documents
62
+ - 🎨 **Design Tools** - Build Photoshop-like applications
63
+ - 📊 **Data Visualization** - Charts, graphs, infographics
64
+ - 🎬 **Video Editing** - Thumbnails, previews, effects, transitions
65
+ - 🔄 **Automation** - Batch processing, thumbnail generation, asset creation
151
66
 
152
67
  ---
153
68
 
154
- ## ✨ Features Overview
155
-
156
- ### 🖼️ **Advanced Image Processing**
157
- - **Professional Filters**: 22+ filters including blur, sharpen, vintage, cinematic effects
158
- - **Image Masking**: Apply masks with alpha, luminance, or inverse modes
159
- - **Image Distortion**: Perspective, bulge, pinch, and mesh warping effects
160
- - **Effects Stack**: Vignette, lens flare, chromatic aberration, film grain
161
- - **Shape Drawing**: 8+ shapes (rectangle, circle, heart, star, polygon, etc.)
162
- - **Gradient Support**: Linear and radial gradients for fills and strokes
163
- - **Shadow & Stroke Effects**: Customizable shadows and strokes for all shapes
164
- - **Rotation & Positioning**: Full control over image placement and rotation
165
- - **Image Stitching**: Combine multiple images into panoramas or grids
166
- - **Collage Maker**: Create beautiful collages with multiple layout options
167
- - **Image Compression**: Optimize images with quality control (JPEG, WebP, AVIF)
168
- - **Color Palette Extraction**: Extract color palettes using multiple algorithms
169
-
170
- ### 🎨 **Rich Background System**
171
- - **Multiple Background Types**: Solid colors, gradients, custom images
172
- - **Video Backgrounds**: Extract frames from videos for dynamic backgrounds
173
- - **Background Filters**: Apply filters directly to background images
174
- - **Pattern Overlays**: 12+ built-in patterns (grid, dots, stripes, hexagons, etc.)
175
- - **Custom Patterns**: Use your own images as repeating patterns
176
- - **Blend Modes**: 11+ blend modes for professional compositing
177
- - **Noise Effects**: Add texture with customizable noise intensity
178
-
179
- ### 📝 **Enhanced Text Rendering**
180
- - **Font Management**: Custom fonts, sizes, families, and styles
181
- - **Text on Paths**: Render text along curves (line, arc, bezier, quadratic)
182
- - **Text Decorations**: Bold, italic, underline, overline, strikethrough, highlight
183
- - **Advanced Effects**: Glow, shadow, stroke with gradient support
184
- - **Spacing Control**: Letter spacing, word spacing, line height
185
- - **Text Wrapping**: Automatic text wrapping with size constraints
186
- - **Rotation**: Full 360° text rotation support
187
-
188
- ### 🎯 **Advanced Custom Lines**
189
- - **Smooth Paths**: Bezier, Catmull-Rom, and smooth interpolation
190
- - **Arrow Markers**: Customizable start/end arrows with multiple styles
191
- - **Path Markers**: Add markers at any position along paths
192
- - **Line Patterns**: Dots, dashes, and custom pattern segments
193
- - **Line Textures**: Apply texture images to lines
194
-
195
- ### 🔧 **Professional Tools**
196
- - **Chart Generation**: Bar charts, pie charts, line charts
197
- - **GIF Creation**: Animated GIFs from image sequences
198
- - **Format Conversion**: Convert between PNG, JPEG, WebP, AVIF, and more
199
- - **Image Manipulation**: Crop, resize, background removal
200
- - **Color Detection**: Extract and analyze colors from images
201
- - **Batch Operations**: Process multiple operations in parallel
202
- - **Chain Operations**: Chain operations sequentially for complex workflows
203
- - **Advanced File Saving**: Save buffers to local files with smart naming, format conversion, and batch support
204
-
205
- ### 🎬 **Comprehensive Video Processing** (v5.2.0+)
206
- - **Frame Extraction**: Extract single frames, multiple frames, or all frames from videos
207
- - **Video Information**: Get video metadata (duration, resolution, FPS, bitrate, codec)
208
- - **Thumbnail Generation**: Create grid thumbnails with multiple frames
209
- - **Format Conversion**: Convert videos between MP4, WebM, AVI, MOV, MKV
210
- - **Video Trimming**: Cut and trim video segments
211
- - **Audio Extraction**: Extract audio tracks (MP3, WAV, AAC, OGG)
212
- - **Watermarking**: Add image watermarks to videos with position and opacity control
213
- - **Speed Control**: Change video playback speed (slow motion, fast forward)
214
- - **Preview Generation**: Generate preview frames for video browsing
215
- - **Video Effects**: Apply filters (blur, brightness, contrast, saturation, grayscale, sepia, invert, sharpen, noise)
216
- - **Video Merging**: Concatenate videos sequentially, side-by-side, or in grids
217
- - **Rotation & Flipping**: Rotate videos (90°, 180°, 270°) and flip horizontally/vertically
218
- - **Video Cropping**: Crop videos to specific regions
219
- - **Compression**: Optimize video file sizes with quality presets
220
- - **Text Overlays**: Add text/subtitles to videos with positioning and timing
221
- - **Fade Effects**: Add fade in/out transitions
222
- - **Reverse Playback**: Reverse video and audio playback
223
- - **Video Loops**: Create seamless video loops
224
- - **Batch Processing**: Process multiple videos with different operations
225
- - **Scene Detection**: Automatically detect scene changes
226
- - **Video Stabilization**: Reduce camera shake and stabilize shaky footage
227
- - **Color Correction**: Professional color grading (brightness, contrast, saturation, hue, temperature)
228
- - **Picture-in-Picture**: Add overlay videos with position, size, and opacity control
229
- - **Split Screen**: Create side-by-side, top-bottom, or grid layouts with multiple videos
230
- - **Time-lapse Creation**: Speed up videos to create time-lapse effects
231
- - **Audio Control**: Mute videos or adjust audio volume
232
- - **Format Detection**: Analyze video codec, container, and properties
69
+ ## ✨ Complete Feature List
70
+
71
+ ### 🎨 **Canvas & Backgrounds**
72
+
73
+ | Feature | Description |
74
+ |---------|-------------|
75
+ | **Solid Colors** | Custom background colors with opacity control |
76
+ | **Gradients** | Linear, radial, and conic gradients with custom stops |
77
+ | **Image Backgrounds** | Custom images with filters, opacity, and positioning |
78
+ | **Video Backgrounds** | Extract frames from videos as backgrounds |
79
+ | **Patterns** | Professional pattern overlays (dots, lines, grids, custom) |
80
+ | **Noise Effects** | Add texture and grain to backgrounds |
81
+ | **Zoom Effects** | Apply zoom transformations to backgrounds |
82
+
83
+ ### 🖼️ **Image Processing**
84
+
85
+ | Feature | Description |
86
+ |---------|-------------|
87
+ | **Image Drawing** | Draw images with positioning, scaling, rotation |
88
+ | **Image Filters** | Blur, sharpen, brightness, contrast, saturation |
89
+ | **Color Filters** | Grayscale, sepia, invert, custom color adjustments |
90
+ | **Professional Filters** | Vintage, cinematic, black & white, custom presets |
91
+ | **Image Effects** | Vignette, lens flare, chromatic aberration, film grain |
92
+ | **Image Masking** | Alpha, luminance, and inverse masking modes |
93
+ | **Image Distortion** | Perspective, bulge/pinch, mesh warping |
94
+ | **Image Cropping** | Inner and outer cropping with precise control |
95
+ | **Image Resizing** | Smart resizing with aspect ratio preservation |
96
+ | **Background Removal** | AI-powered background removal |
97
+ | **Color Detection** | Extract dominant colors from images |
98
+ | **Color Removal** | Remove specific colors from images |
99
+ | **Image Rotation** | Rotate images with custom angles |
100
+ | **Image Blending** | 15+ blend modes (multiply, screen, overlay, etc.) |
101
+ | **Image Stitching** | Stitch multiple images together (horizontal, vertical, grid) |
102
+ | **Image Collage** | Create collages with grid, masonry, carousel layouts |
103
+ | **Image Compression** | Compress images (JPEG, WebP, AVIF) with quality control |
104
+ | **Color Palette Extraction** | Extract color palettes using k-means, median-cut, octree |
105
+
106
+ ### 📝 **Text Rendering**
107
+
108
+ | Feature | Description |
109
+ |---------|-------------|
110
+ | **Basic Text** | Simple text rendering with fonts and colors |
111
+ | **Enhanced Text** | Advanced text with shadows, strokes, glows |
112
+ | **Text Gradients** | Gradient text fills (linear, radial, conic) |
113
+ | **Text on Paths** | Render text along curves, arcs, and bezier paths |
114
+ | **Custom Fonts** | Load custom fonts (.ttf, .otf, .woff) |
115
+ | **Text Decorations** | Bold, italic, underline, strikethrough |
116
+ | **Text Effects** | Shadows, strokes, glows, outlines |
117
+ | **Text Alignment** | Left, center, right, justify alignment |
118
+ | **Text Wrapping** | Automatic text wrapping with custom widths |
119
+ | **Text Rotation** | Rotate text at any angle |
120
+ | **Text Spacing** | Letter spacing and line height control |
121
+
122
+ ### 🔷 **Shape Drawing**
123
+
124
+ | Feature | Description |
125
+ |---------|-------------|
126
+ | **Basic Shapes** | Rectangle, circle, ellipse, line, polygon |
127
+ | **Complex Shapes** | Heart, star, custom path shapes |
128
+ | **Shape Fills** | Solid colors, gradients, patterns, images |
129
+ | **Shape Strokes** | Custom stroke width, color, style (solid, dashed, dotted) |
130
+ | **Shape Shadows** | Drop shadows with blur, offset, color |
131
+ | **Shape Rotation** | Rotate shapes with custom angles |
132
+ | **Shape Scaling** | Scale shapes with custom factors |
133
+ | **Advanced Strokes** | Groove, ridge, double, inset, outset styles |
134
+
135
+ ### 📊 **Chart Generation**
136
+
137
+ | Feature | Description |
138
+ |---------|-------------|
139
+ | **Pie Charts** | Standard and donut pie charts with gradients |
140
+ | **Bar Charts** | Standard, grouped, stacked, waterfall, lollipop charts |
141
+ | **Horizontal Bar Charts** | All bar chart types in horizontal orientation |
142
+ | **Line Charts** | Multi-series line charts with gradients |
143
+ | **Comparison Charts** | Side-by-side comparison of any two chart types |
144
+ | **Chart Customization** | Gradients, custom fonts, legends, labels, titles |
145
+ | **Data Visualization** | Professional charts for data presentation |
146
+
147
+ ### 🎬 **Video Processing** (33+ Features)
148
+
149
+ | Feature | Description |
150
+ |---------|-------------|
151
+ | **Video Info** | Extract video metadata (duration, resolution, FPS, bitrate) |
152
+ | **Frame Extraction** | Extract single or multiple frames at specific times |
153
+ | **Video Thumbnails** | Generate thumbnail grids from videos |
154
+ | **Video Conversion** | Convert between formats (MP4, WebM, AVI, MOV, MKV) |
155
+ | **Video Trimming** | Trim videos to specific time ranges |
156
+ | **Audio Extraction** | Extract audio tracks from videos |
157
+ | **Video Watermarking** | Add image or text watermarks to videos |
158
+ | **Speed Control** | Change video playback speed (slow motion, time-lapse) |
159
+ | **Video Effects** | Apply filters (blur, brightness, contrast, saturation) |
160
+ | **Video Merging** | Merge multiple videos (sequential, side-by-side, grid) |
161
+ | **Segment Replacement** | Replace video segments with other videos or frames |
162
+ | **Video Rotation** | Rotate videos (90°, 180°, 270°) |
163
+ | **Video Cropping** | Crop videos to specific regions |
164
+ | **Video Compression** | Compress videos with quality presets |
165
+ | **Text Overlays** | Add text/subtitles to videos with positioning |
166
+ | **Fade Effects** | Add fade in/out transitions |
167
+ | **Reverse Playback** | Reverse video and audio |
168
+ | **Video Loops** | Create seamless video loops |
169
+ | **Batch Processing** | Process multiple videos in parallel |
170
+ | **Scene Detection** | Detect scene changes in videos |
171
+ | **Video Stabilization** | Reduce camera shake and stabilize footage |
172
+ | **Color Correction** | Professional color grading (brightness, contrast, saturation, hue) |
173
+ | **Picture-in-Picture** | Add overlay videos with positioning |
174
+ | **Split Screen** | Create multi-video layouts (side-by-side, grid) |
175
+ | **Time-lapse Creation** | Speed up videos to create time-lapses |
176
+ | **Audio Control** | Mute, adjust volume, normalize audio levels |
177
+ | **Format Detection** | Analyze video properties and formats |
178
+ | **Freeze Frame** | Hold a frame for dramatic effect |
179
+ | **Export Presets** | Platform-optimized presets (YouTube, Instagram, TikTok, etc.) |
180
+ | **Progress Tracking** | Real-time progress callbacks for all operations |
181
+ | **Audio Normalization** | Professional audio leveling (LUFS, Peak, RMS) |
182
+ | **LUT Support** | Apply Look-Up Tables for cinematic color grading |
183
+ | **Video Transitions** | 9 transition types (fade, wipe, slide, zoom, rotate, etc.) |
184
+ | **Animated Text** | 8 animation types (fadeIn, slideIn, zoom, bounce, typewriter, etc.) |
185
+ | **Frame-to-Video** | Compile edited frames/images into videos |
186
+
187
+ ### 🎞️ **GIF Creation**
188
+
189
+ | Feature | Description |
190
+ |---------|-------------|
191
+ | **GIF Generation** | Create animated GIFs from image sequences |
192
+ | **Frame Management** | Add frames with custom durations |
193
+ | **GIF Watermarking** | Add watermarks to GIFs |
194
+ | **Text Overlays** | Add text to GIF frames |
195
+ | **Output Formats** | File, buffer, base64, attachment output |
196
+ | **Quality Control** | Adjust GIF quality and optimization |
197
+
198
+ ### 🛠️ **Utilities & Tools**
199
+
200
+ | Feature | Description |
201
+ |---------|-------------|
202
+ | **Batch Operations** | Process multiple operations in parallel |
203
+ | **Chain Operations** | Chain operations sequentially |
204
+ | **Format Conversion** | Convert between PNG, JPEG, WebP, AVIF, SVG |
205
+ | **Smart Saving** | Save with timestamps, counters, custom naming |
206
+ | **Multiple Formats** | Export to PNG, JPEG, WebP, AVIF, GIF |
207
+ | **Custom Lines** | Advanced line drawing with arrows, markers, patterns |
208
+ | **Smooth Paths** | Create smooth curves with tension control |
209
+ | **Catmull-Rom Splines** | Professional curve interpolation |
233
210
 
234
211
  ---
235
212
 
236
213
  ## 🚀 Quick Start
237
214
 
238
- ### Installation
239
-
240
215
  ```bash
241
- # npm
242
216
  npm install apexify.js
243
-
244
- # yarn
245
- yarn add apexify.js
246
-
247
- # pnpm
248
- pnpm add apexify.js
249
217
  ```
250
218
 
251
- ### Platform Support
252
-
253
- ✅ **Node.js** - Full support (v16+)
254
- ✅ **Next.js** - Frontend & Backend (App Router & Pages Router)
255
- ✅ **Discord.js** - Perfect for Discord bots
256
- ✅ **Express.js** - API endpoints and server-side rendering
257
- ✅ **Serverless** - AWS Lambda, Vercel, Netlify Functions
258
- ✅ **Docker** - Containerized applications
259
- ✅ **Edge Runtime** - Vercel Edge, Cloudflare Workers (with limitations)
260
-
261
- ### Works Everywhere
262
-
263
- - 🖥️ **Server-Side**: Full feature support
264
- - 🌐 **API Routes**: Generate images on-demand
265
- - ⚡ **Edge Functions**: Lightweight image generation
266
- - 🤖 **Discord Bots**: Dynamic image creation
267
- - 🎨 **Design Tools**: Build visual editors
268
- - 📱 **Web Apps**: Client and server-side rendering
269
-
270
- ### Basic Usage
271
-
272
219
  ```typescript
273
- import { ApexPainter } from 'apexify';
220
+ import { ApexPainter } from 'apexify.js';
274
221
 
275
222
  const painter = new ApexPainter();
276
223
 
277
- // Create a canvas with gradient background
224
+ // Create a canvas
278
225
  const canvas = await painter.createCanvas({
279
- width: 800,
280
- height: 600,
226
+ width: 1200,
227
+ height: 630,
281
228
  gradientBg: {
282
229
  type: 'linear',
283
230
  colors: [
284
- { color: '#FF6B6B', position: 0 },
285
- { color: '#4ECDC4', position: 0.5 },
286
- { color: '#45B7D1', position: 1 }
287
- ],
288
- direction: { x1: 0, y1: 0, x2: 800, y2: 600 }
289
- },
290
- shadow: {
291
- color: '#000',
292
- offsetX: 10,
293
- offsetY: 10,
294
- blur: 20
295
- },
296
- borderRadius: 20
297
- });
298
-
299
- // Add a beautiful heart shape (single object)
300
- const heartImage = await painter.createImage({
301
- source: 'heart',
302
- x: 300,
303
- y: 200,
304
- width: 200,
305
- height: 200,
306
- shape: {
307
- fill: true,
308
- gradient: {
309
- type: 'radial',
310
- colors: [
311
- { color: '#FF6B6B', position: 0 },
312
- { color: '#FF1744', position: 1 }
313
- ],
314
- center: { x: 100, y: 100 },
315
- radius: 100
316
- }
317
- },
318
- shadow: {
319
- color: '#000',
320
- offsetX: 15,
321
- offsetY: 15,
322
- blur: 25
323
- },
324
- stroke: {
325
- color: '#FFF',
326
- width: 5
231
+ { stop: 0, color: '#667EEA' },
232
+ { stop: 1, color: '#764BA2' }
233
+ ]
327
234
  }
328
- }, canvas.buffer);
329
-
330
- // Add stunning text (single object)
331
- const textImage = await painter.createText({
332
- text: 'ApexPainter',
333
- x: 400,
334
- y: 450,
335
- fontSize: 48,
336
- fontFamily: 'Arial',
337
- bold: true,
338
- gradient: {
339
- type: 'linear',
340
- colors: [
341
- { color: '#FFD700', position: 0 },
342
- { color: '#FF6B6B', position: 1 }
343
- ],
344
- direction: { x1: 0, y1: 0, x2: 300, y2: 0 }
345
- },
346
- glow: {
347
- color: '#FFD700',
348
- intensity: 0.8,
349
- opacity: 0.9
350
- },
351
- shadow: {
352
- color: '#000',
353
- offsetX: 8,
354
- offsetY: 8,
355
- blur: 15
356
- },
357
- stroke: {
358
- color: '#FFF',
359
- width: 3
360
- }
361
- }, heartImage);
362
-
363
- // Save the result using the advanced save method
364
- const saveResult = await painter.save(textImage, {
365
- directory: './output',
366
- filename: 'beautiful-artwork',
367
- format: 'png'
368
235
  });
369
- console.log(`Saved to: ${saveResult.path} (${saveResult.size} bytes)`);
370
-
371
- // Or use the simple approach (auto-generated filename)
372
- const autoSave = await painter.save(textImage);
373
- // Saves to: ./ApexPainter_output/20241220_143025_123.png
374
- ```
375
-
376
- ### 💾 **Advanced Save Method**
377
-
378
- The `save()` method provides powerful file saving capabilities with extensive customization:
379
236
 
380
- ```typescript
381
- // Simple save with auto-generated timestamp name
382
- const canvas = await painter.createCanvas({ width: 800, height: 600 });
383
- const result = await painter.save(canvas.buffer);
384
- // Saves to: ./ApexPainter_output/20241220_143025_123.png
385
-
386
- // Custom filename and directory
387
- await painter.save(canvas.buffer, {
388
- directory: './my-images',
389
- filename: 'my-canvas',
390
- format: 'jpg',
391
- quality: 95
392
- });
237
+ // Add text
238
+ const text = await painter.createText({
239
+ text: 'Hello, World!',
240
+ x: 600,
241
+ y: 315,
242
+ fontSize: 48,
243
+ color: '#FFFFFF',
244
+ fontFamily: 'Arial'
245
+ }, canvas);
393
246
 
394
- // Save with counter naming
395
- await painter.save(canvas.buffer, {
396
- naming: 'counter',
397
- prefix: 'image-',
398
- counterStart: 1
399
- });
400
- // Saves to: ./ApexPainter_output/image-1.png, image-2.png, etc.
247
+ // Add image
248
+ const image = await painter.createImage({
249
+ source: 'path/to/image.png',
250
+ x: 100,
251
+ y: 100,
252
+ width: 200,
253
+ height: 200
254
+ }, canvas);
401
255
 
402
- // Save multiple buffers in batch
403
- const buffers = [canvas1.buffer, canvas2.buffer, canvas3.buffer];
404
- const results = await painter.saveMultiple(buffers, {
405
- prefix: 'batch-',
406
- naming: 'counter'
256
+ // Save result
257
+ await painter.save(image, {
258
+ path: './output.png',
259
+ format: 'png'
407
260
  });
408
- // Saves: batch-1.png, batch-2.png, batch-3.png
409
261
  ```
410
262
 
411
- **Save Options:**
412
- - `directory` - Output directory (default: `./ApexPainter_output`)
413
- - `filename` - Custom filename (auto-generated if not provided)
414
- - `format` - File format: `png`, `jpg`, `jpeg`, `webp`, `avif`, `gif` (default: `png`)
415
- - `quality` - Quality for JPEG/WebP (0-100, default: 90)
416
- - `naming` - Naming pattern: `timestamp`, `counter`, or `custom` (default: `timestamp`)
417
- - `prefix` / `suffix` - Add prefix/suffix to filenames
418
- - `overwrite` - Overwrite existing files (default: `false`, auto-renames if exists)
419
- - `createDirectory` - Auto-create directory if missing (default: `true`)
420
-
421
- ### 📝 **Flexible Array Support**
422
-
423
- Both `createImage()` and `createText()` methods accept **single objects** OR **arrays of objects**:
424
-
425
- ```typescript
426
- // ✅ Single Object
427
- await painter.createImage({
428
- source: 'heart',
429
- x: 100, y: 100,
430
- width: 200, height: 200,
431
- shape: { fill: true, color: '#ff6b6b' }
432
- }, canvasBuffer);
433
-
434
- // ✅ Array of Objects
435
- await painter.createImage([
436
- {
437
- source: 'rectangle',
438
- x: 50, y: 50,
439
- width: 100, height: 80,
440
- shape: { fill: true, color: '#ff6b6b' }
441
- },
442
- {
443
- source: 'circle',
444
- x: 200, y: 50,
445
- width: 80, height: 80,
446
- shape: { fill: true, color: '#4ecdc4' }
447
- },
448
- {
449
- source: 'star',
450
- x: 350, y: 50,
451
- width: 80, height: 80,
452
- shape: { fill: true, color: '#45b7d1' }
453
- }
454
- ], canvasBuffer);
455
-
456
- // ✅ Single Text Object
457
- await painter.createText({
458
- text: 'Hello World',
459
- x: 100, y: 100,
460
- fontSize: 24,
461
- color: '#ff6b6b'
462
- }, canvasBuffer);
463
-
464
- // ✅ Array of Text Objects
465
- await painter.createText([
466
- {
467
- text: 'Title',
468
- x: 100, y: 50,
469
- fontSize: 32,
470
- bold: true,
471
- color: '#2c3e50'
472
- },
473
- {
474
- text: 'Subtitle',
475
- x: 100, y: 100,
476
- fontSize: 18,
477
- color: '#666'
478
- },
479
- {
480
- text: 'Body text with effects',
481
- x: 100, y: 150,
482
- fontSize: 14,
483
- color: '#333',
484
- glow: { color: '#ffd700', intensity: 0.5 },
485
- shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
486
- }
487
- ], canvasBuffer);
488
- ```
489
-
490
- ### 🎨 **Advanced Stroke Styles**
491
-
492
- All stroke properties now support **6 different stroke styles**:
493
-
494
- ```typescript
495
- // ✅ Basic Stroke Styles
496
- await painter.createImage({
497
- source: 'rectangle',
498
- x: 100, y: 100,
499
- width: 200, height: 150,
500
- shape: { fill: true, color: '#ffffff' },
501
- stroke: {
502
- color: '#ff6b6b',
503
- width: 8,
504
- style: 'dashed' // solid, dashed, dotted, groove, ridge, double
505
- }
506
- }, canvasBuffer);
507
-
508
- // ✅ Gradient Strokes with Styles
509
- await painter.createImage({
510
- source: 'circle',
511
- x: 200, y: 200,
512
- width: 150, height: 150,
513
- shape: { fill: true, color: '#ffffff' },
514
- stroke: {
515
- gradient: {
516
- type: 'linear',
517
- colors: [
518
- { stop: 0, color: '#ff6b6b' },
519
- { stop: 1, color: '#4ecdc4' }
520
- ]
521
- },
522
- width: 6,
523
- style: 'ridge' // Works with all styles!
524
- }
525
- }, canvasBuffer);
526
-
527
- // ✅ Text Strokes with Styles
528
- await painter.createText({
529
- text: 'Styled Text',
530
- x: 100, y: 100,
531
- fontSize: 32,
532
- color: '#ffffff',
533
- stroke: {
534
- color: '#ff6b6b',
535
- width: 4,
536
- style: 'double' // All 6 styles supported!
537
- }
538
- }, canvasBuffer);
539
- ```
540
-
541
- **Available Stroke Styles:**
542
- - `solid` - Clean solid line (default)
543
- - `dashed` - Dashed line pattern
544
- - `dotted` - Dotted line pattern
545
- - `groove` - 3D grooved effect (dark outer, light inner)
546
- - `ridge` - 3D ridged effect (light outer, dark inner)
547
- - `double` - Double parallel lines
548
-
549
- ### 🔤 **Organized Font Management**
550
-
551
- Text fonts are now organized in a clean `font` object structure:
552
-
553
- ```typescript
554
- // ✅ New Font Object Structure
555
- await painter.createText({
556
- text: 'Organized Font',
557
- x: 100, y: 100,
558
- font: {
559
- size: 24, // Font size in pixels
560
- family: 'Arial', // Font family name
561
- name: 'customFont', // Custom font name (for registration)
562
- path: './fonts/custom.ttf' // Path to custom font file
563
- },
564
- color: '#333333',
565
- bold: true,
566
- italic: true
567
- }, canvasBuffer);
568
-
569
- // ✅ Backward Compatibility (Legacy Properties)
570
- await painter.createText({
571
- text: 'Legacy Font Properties',
572
- x: 100, y: 150,
573
- fontSize: 24, // Still works!
574
- fontFamily: 'Arial', // Still works!
575
- fontName: 'customFont', // Still works!
576
- fontPath: './fonts/custom.ttf', // Still works!
577
- color: '#333333'
578
- }, canvasBuffer);
579
-
580
- // ✅ Mixed Usage (New Object Takes Priority)
581
- await painter.createText({
582
- text: 'Mixed Usage',
583
- x: 100, y: 200,
584
- font: {
585
- size: 28,
586
- family: 'Georgia'
587
- },
588
- fontSize: 24, // Ignored (font.size takes priority)
589
- fontFamily: 'Arial', // Ignored (font.family takes priority)
590
- color: '#333333'
591
- }, canvasBuffer);
592
- ```
593
-
594
- **Font Object Properties:**
595
- - `size` - Font size in pixels (replaces `fontSize`)
596
- - `family` - Font family name (replaces `fontFamily`)
597
- - `name` - Custom font name for registration (replaces `fontName`)
598
- - `path` - Path to custom font file (replaces `fontPath`)
599
-
600
- **Benefits:**
601
- - **Cleaner Structure**: All font properties in one organized object
602
- - **Better IntelliSense**: IDE autocomplete for font properties
603
- - **Backward Compatible**: Legacy properties still work
604
- - **Priority System**: New `font` object overrides legacy properties
605
-
606
- ### 🌈 **Advanced Text Gradient Features**
607
-
608
- Text effects now support **gradients** for enhanced visual appeal:
609
-
610
- ```typescript
611
- // ✅ Gradient Glow
612
- await painter.createText({
613
- text: 'Gradient Glow Text',
614
- x: 100, y: 100,
615
- fontSize: 32,
616
- color: '#ffffff',
617
- glow: {
618
- gradient: {
619
- type: 'linear',
620
- colors: [
621
- { stop: 0, color: '#ff6b6b' },
622
- { stop: 1, color: '#4ecdc4' }
623
- ]
624
- },
625
- intensity: 15,
626
- opacity: 0.9
627
- }
628
- }, canvasBuffer);
629
-
630
- // ✅ Gradient Highlight
631
- await painter.createText({
632
- text: 'Gradient Highlight',
633
- x: 100, y: 150,
634
- fontSize: 24,
635
- color: '#000000',
636
- highlight: {
637
- gradient: {
638
- type: 'radial',
639
- colors: [
640
- { stop: 0, color: '#ffd700' },
641
- { stop: 1, color: '#ff6b6b' }
642
- ]
643
- },
644
- opacity: 0.6
645
- }
646
- }, canvasBuffer);
647
-
648
- // ✅ Gradient Text Decorations
649
- await painter.createText({
650
- text: 'Styled Decorations',
651
- x: 100, y: 200,
652
- fontSize: 28,
653
- color: '#ffffff',
654
- underline: {
655
- gradient: {
656
- type: 'linear',
657
- colors: [
658
- { stop: 0, color: '#ff6b6b' },
659
- { stop: 1, color: '#4ecdc4' }
660
- ]
661
- },
662
- width: 4
663
- },
664
- overline: {
665
- gradient: {
666
- type: 'linear',
667
- colors: [
668
- { stop: 0, color: '#feca57' },
669
- { stop: 1, color: '#ff9ff3' }
670
- ]
671
- },
672
- width: 3
673
- },
674
- strikethrough: {
675
- gradient: {
676
- type: 'linear',
677
- colors: [
678
- { stop: 0, color: '#96ceb4' },
679
- { stop: 1, color: '#45b7d1' }
680
- ]
681
- },
682
- width: 5
683
- }
684
- }, canvasBuffer);
685
-
686
- // ✅ Backward Compatibility (Simple Boolean)
687
- await painter.createText({
688
- text: 'Simple Decorations',
689
- x: 100, y: 250,
690
- fontSize: 24,
691
- color: '#ffffff',
692
- underline: true, // Uses default color
693
- overline: true, // Uses default color
694
- strikethrough: true // Uses default color
695
- }, canvasBuffer);
696
- ```
697
-
698
- **Gradient Support:**
699
- - **Glow**: Gradient glow effects with intensity and opacity
700
- - **Highlight**: Gradient background highlights
701
- - **Underline**: Custom gradient underlines with width control
702
- - **Overline**: Custom gradient overlines with width control
703
- - **Strikethrough**: Custom gradient strikethrough with width control
704
- - **Backward Compatible**: Simple `boolean` values still work
705
-
706
263
  ---
707
264
 
708
- ## 🎯 Real-World Examples
709
-
710
- ### 🏢 **Business Cards & Marketing Materials**
265
+ ## 📦 Installation
711
266
 
712
- ```typescript
713
- // Create a professional business card
714
- const businessCard = await painter.createCanvas({
715
- width: 400,
716
- height: 250,
717
- gradientBg: {
718
- type: 'linear',
719
- colors: [
720
- { color: '#2C3E50', position: 0 },
721
- { color: '#34495E', position: 1 }
722
- ],
723
- direction: { x1: 0, y1: 0, x2: 400, y2: 250 }
724
- },
725
- patternBg: {
726
- type: 'dots',
727
- color: '#FFF',
728
- opacity: 0.1,
729
- size: 5,
730
- spacing: 20
731
- }
732
- });
733
-
734
- // Add company logo (star shape)
735
- const logo = await painter.createImage({
736
- source: 'star',
737
- x: 50,
738
- y: 50,
739
- width: 60,
740
- height: 60,
741
- fill: true,
742
- color: '#FFD700',
743
- shadow: { color: '#000', offsetX: 3, offsetY: 3, blur: 8 }
744
- }, businessCard.buffer);
745
-
746
- // Add company name
747
- const companyText = await painter.createText({
748
- text: 'ACME Corp',
749
- x: 130,
750
- y: 80,
751
- fontSize: 24,
752
- fontFamily: 'Arial',
753
- bold: true,
754
- color: '#FFF',
755
- shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
756
- }, logo);
757
-
758
- // Add contact info
759
- const contactText = await painter.createText({
760
- text: 'john@acme.com\n+1 (555) 123-4567',
761
- x: 50,
762
- y: 150,
763
- fontSize: 14,
764
- fontFamily: 'Arial',
765
- color: '#BDC3C7',
766
- lineHeight: 1.5
767
- }, companyText);
267
+ ```bash
268
+ npm install apexify.js
269
+ # or
270
+ yarn add apexify.js
271
+ # or
272
+ pnpm add apexify.js
768
273
  ```
769
274
 
770
- ### 🎮 **Game UI Elements**
771
-
772
- ```typescript
773
- // Create a game button
774
- const gameButton = await painter.createCanvas({
775
- width: 200,
776
- height: 60,
777
- gradientBg: {
778
- type: 'linear',
779
- colors: [
780
- { color: '#FF6B6B', position: 0 },
781
- { color: '#FF1744', position: 1 }
782
- ],
783
- direction: { x1: 0, y1: 0, x2: 200, y2: 60 }
784
- },
785
- shadow: {
786
- color: '#000',
787
- offsetX: 5,
788
- offsetY: 5,
789
- blur: 15
790
- },
791
- borderRadius: 30
792
- });
793
-
794
- // Add button text with glow effect
795
- const buttonText = await painter.createText({
796
- text: 'PLAY NOW',
797
- x: 100,
798
- y: 35,
799
- fontSize: 20,
800
- fontFamily: 'Arial',
801
- bold: true,
802
- color: '#FFF',
803
- textAlign: 'center',
804
- textBaseline: 'middle',
805
- glow: {
806
- color: '#FFD700',
807
- intensity: 0.6,
808
- opacity: 0.8
809
- },
810
- shadow: {
811
- color: '#000',
812
- offsetX: 2,
813
- offsetY: 2,
814
- blur: 4
815
- }
816
- }, gameButton.buffer);
817
- ```
275
+ **Requirements:**
276
+ - Node.js 16+
277
+ - TypeScript 5+ (optional but recommended)
818
278
 
819
279
  ---
820
280
 
821
- ## 📚 API Reference
281
+ ## 🎯 Use Cases
822
282
 
823
- ### 🔄 **Flexible Parameters**
283
+ ### **Next.js Applications**
284
+ Generate images in API routes, server actions, and edge functions. Perfect for dynamic OG images, social media previews, and on-demand image generation.
824
285
 
825
- Both `createImage()` and `createText()` methods accept:
826
- - **Single Object**: `ImageProperties` or `TextProperties`
827
- - **Array of Objects**: `ImageProperties[]` or `TextProperties[]`
286
+ ### **Discord Bots**
287
+ Create stunning welcome cards, level-up graphics, profile images, and leaderboards. All with a simple API.
828
288
 
829
- This allows you to add multiple elements in one call for better performance and cleaner code.
289
+ ### **E-commerce Platforms**
290
+ Generate product images, banners, marketing materials, and promotional graphics automatically.
830
291
 
831
- ### Shape Types
292
+ ### **Social Media Tools**
293
+ Create profile pictures, cover images, post graphics, and story templates programmatically.
832
294
 
833
- - `rectangle` - Standard rectangle
834
- - `square` - Perfect square
835
- - `circle` - Perfect circle
836
- - `triangle` - Equilateral triangle
837
- - `trapezium` - Trapezoid shape
838
- - `star` - 5-pointed star
839
- - `heart` - Heart shape with bezier curves
840
- - `polygon` - Custom polygon
295
+ ### **Design Tools**
296
+ Build Photoshop-like applications with code export capabilities and professional image processing.
841
297
 
842
- ### Pattern Types
298
+ ### **Data Visualization**
299
+ Generate charts, graphs, and infographics for reports, dashboards, and presentations.
843
300
 
844
- - `grid` - Grid pattern
845
- - `dots` - Dot pattern
846
- - `diagonal` - Diagonal lines
847
- - `stripes` - Horizontal/vertical stripes
848
- - `waves` - Wave pattern
849
- - `crosses` - Cross pattern
850
- - `hexagons` - Hexagonal pattern
851
- - `checkerboard` - Checkerboard pattern
852
- - `diamonds` - Diamond pattern
853
- - `triangles` - Triangle pattern
854
- - `stars` - Star pattern
855
- - `polka` - Polka dot pattern
856
- - `custom` - Custom image pattern
301
+ ### **Video Production**
302
+ Create thumbnails, previews, apply effects, transitions, and process videos at scale.
857
303
 
858
304
  ---
859
305
 
860
- ## 🆕 What's New
861
-
862
- ### 🎬 v5.2.0 - Comprehensive Video Processing Suite
863
-
864
- #### 18 New Video Features
865
- - 🎥 **Video Effects & Filters**: Apply professional filters (blur, brightness, contrast, saturation, grayscale, sepia, invert, sharpen, noise)
866
- - 🔗 **Video Merging**: Concatenate videos sequentially, side-by-side, or in grid layouts
867
- - 🔄 **Rotation & Flipping**: Rotate videos (90°, 180°, 270°) and flip horizontally/vertically
868
- - ✂️ **Video Cropping**: Crop videos to specific regions with precise control
869
- - 📦 **Video Compression**: Optimize video file sizes with quality presets and custom bitrate
870
- - 📝 **Text Overlays**: Add text/subtitles to videos with 7 position options and time-based visibility
871
- - 🌅 **Fade Effects**: Add fade in/out transitions at video start/end
872
- - ⏪ **Reverse Playback**: Reverse video and audio playback
873
- - 🔁 **Video Loops**: Create seamless video loops
874
- - ⚡ **Batch Processing**: Process multiple videos with different operations
875
- - 🎬 **Scene Detection**: Automatically detect scene changes with configurable threshold
876
- - 📹 **Video Stabilization**: Reduce camera shake and stabilize shaky footage
877
- - 🎨 **Color Correction**: Professional color grading (brightness, contrast, saturation, hue, temperature)
878
- - 📺 **Picture-in-Picture**: Add overlay videos with position, size, and opacity control
879
- - 🖼️ **Split Screen**: Create side-by-side, top-bottom, or grid layouts with multiple videos
880
- - ⏱️ **Time-lapse Creation**: Speed up videos to create time-lapse effects
881
- - 🔇 **Audio Control**: Mute videos or adjust audio volume
882
- - 🔍 **Format Detection**: Analyze video codec, container, and properties
883
-
884
- #### Enhanced Video Methods
885
- - ✅ **Smart Audio Detection**: Automatically detects if videos have audio streams
886
- - ✅ **Unified API**: All video features accessible through single `createVideo()` method
887
- - ✅ **Better Error Handling**: Clear error messages with FFmpeg installation guides
888
- - ✅ **Resource Management**: Automatic cleanup of temporary files
889
-
890
- ### 🎉 v5.0.0 - Major Feature Release
891
-
892
- #### Background Enhancements
893
- - ✨ **Video Backgrounds**: Use video frames as dynamic backgrounds
894
- - 🎨 **Background Filters**: Apply filters directly to background images
895
- - 🔧 **Background Opacity**: Control transparency of background images
896
-
897
- #### Image Processing
898
- - 🎭 **Image Masking**: Apply masks with multiple modes (alpha, luminance, inverse)
899
- - 🔄 **Image Distortion**: Perspective, bulge, pinch, and mesh warping
900
- - ✨ **Effects Stack**: Vignette, lens flare, chromatic aberration, film grain
901
- - 🎛️ **Enhanced Filters**: Filter intensity and order control
902
-
903
- #### Text Features
904
- - 📐 **Text on Paths**: Render text along curves and custom paths
905
-
906
- #### Custom Lines
907
- - ➡️ **Arrow Markers**: Start/end arrows with customizable styles
908
- - 📍 **Path Markers**: Add markers at any position along paths
909
- - 🎨 **Line Patterns**: Dots, dashes, and custom patterns
910
- - 🖼️ **Line Textures**: Apply texture images to lines
911
-
912
- #### New Utilities
913
- - ⚡ **Batch Operations**: Process multiple operations in parallel
914
- - 🔗 **Chain Operations**: Chain operations sequentially
915
- - 🖼️ **Image Stitching**: Combine images into panoramas
916
- - 🎨 **Collage Maker**: Create beautiful image collages
917
- - 📦 **Image Compression**: Optimize images with quality control
918
- - 🎨 **Color Palette Extraction**: Extract color palettes from images
919
- - 💾 **Advanced Save Method**: Save buffers to files with smart naming, format conversion, and batch support
920
-
921
- See [CHANGELOG.md](CHANGELOG.md) for complete details.
922
-
923
- ---
924
-
925
- ## 💼 Real-World Use Cases
926
-
927
- ### 🎯 **Next.js Image Generation API**
928
-
929
- ```typescript
930
- // app/api/og-image/route.ts
931
- import { ApexPainter } from 'apexify.js';
932
- import { NextRequest, NextResponse } from 'next/server';
933
-
934
- export async function GET(request: NextRequest) {
935
- const searchParams = request.nextUrl.searchParams;
936
- const title = searchParams.get('title') || 'Default Title';
937
-
938
- const painter = new ApexPainter();
939
- const canvas = await painter.createCanvas({
940
- width: 1200,
941
- height: 630,
942
- gradientBg: {
943
- type: 'linear',
944
- colors: [
945
- { stop: 0, color: '#667EEA' },
946
- { stop: 1, color: '#764BA2' }
947
- ]
948
- }
949
- });
950
-
951
- const image = await painter.createText({
952
- text: title,
953
- x: 600,
954
- y: 315,
955
- fontSize: 72,
956
- bold: true,
957
- color: '#FFFFFF',
958
- textAlign: 'center'
959
- }, canvas);
960
-
961
- return new NextResponse(image, {
962
- headers: { 'Content-Type': 'image/png' }
963
- });
964
- }
965
- ```
966
-
967
- ### 🤖 **Discord Bot Welcome Card**
968
-
969
- ```typescript
970
- // discord-bot.ts
971
- import { ApexPainter } from 'apexify.js';
972
- import { Client, GatewayIntentBits, AttachmentBuilder } from 'discord.js';
973
-
974
- const client = new Client({ intents: [GatewayIntentBits.GuildMembers] });
975
- const painter = new ApexPainter();
976
-
977
- client.on('guildMemberAdd', async (member) => {
978
- // Create welcome card
979
- const canvas = await painter.createCanvas({
980
- width: 1024,
981
- height: 500,
982
- customBg: { source: './assets/welcome-bg.jpg' }
983
- });
984
-
985
- const image = await painter.createText([
986
- {
987
- text: `Welcome ${member.user.username}!`,
988
- x: 512,
989
- y: 200,
990
- fontSize: 48,
991
- bold: true,
992
- color: '#FFFFFF',
993
- textAlign: 'center'
994
- },
995
- {
996
- text: `You are member #${member.guild.memberCount}`,
997
- x: 512,
998
- y: 280,
999
- fontSize: 32,
1000
- color: '#CCCCCC',
1001
- textAlign: 'center'
1002
- }
1003
- ], canvas);
1004
-
1005
- const attachment = new AttachmentBuilder(image, { name: 'welcome.png' });
1006
- await member.guild.systemChannel?.send({ files: [attachment] });
1007
- });
1008
- ```
1009
-
1010
- ### 🎨 **Design Tool with Code Export**
1011
-
1012
- ```typescript
1013
- // design-editor.ts
1014
- import { ApexPainter } from 'apexify.js';
1015
-
1016
- class DesignEditor {
1017
- private painter = new ApexPainter();
1018
- private design: any = { elements: [] };
1019
-
1020
- // Add element to design
1021
- addElement(element: any) {
1022
- this.design.elements.push(element);
1023
- }
1024
-
1025
- // Render design
1026
- async render() {
1027
- const canvas = await this.painter.createCanvas(this.design.canvas);
1028
- let buffer = canvas.buffer;
1029
-
1030
- for (const element of this.design.elements) {
1031
- if (element.type === 'shape') {
1032
- buffer = await this.painter.createImage(element, buffer);
1033
- } else if (element.type === 'text') {
1034
- buffer = await this.painter.createText(element, buffer);
1035
- }
1036
- }
1037
-
1038
- return buffer;
1039
- }
1040
-
1041
- // Export as ApexPainter code
1042
- exportCode() {
1043
- return `
1044
- import { ApexPainter } from 'apexify.js';
1045
-
1046
- const painter = new ApexPainter();
1047
- const canvas = await painter.createCanvas(${JSON.stringify(this.design.canvas, null, 2)});
1048
- ${this.design.elements.map((el: any, i: number) =>
1049
- `const step${i} = await painter.${el.type === 'shape' ? 'createImage' : 'createText'}(${JSON.stringify(el, null, 2)}, ${i === 0 ? 'canvas' : `step${i-1}`});`
1050
- ).join('\n')}
1051
- `.trim();
1052
- }
1053
- }
1054
- ```
1055
-
1056
- ### 📊 **Dynamic Chart Generation**
306
+ ## 🔥 Performance
1057
307
 
1058
- ```typescript
1059
- // analytics-dashboard.ts
1060
- import { ApexPainter } from 'apexify.js';
1061
-
1062
- async function generateAnalyticsChart(data: number[]) {
1063
- const painter = new ApexPainter();
1064
-
1065
- const chart = await painter.createChart({
1066
- chartType: 'bar',
1067
- chartNumber: 1,
1068
- data: {
1069
- chartData: { width: 800, height: 400 },
1070
- xLabels: data.map((_, i) => i),
1071
- yLabels: [0, 25, 50, 75, 100],
1072
- data: {
1073
- xAxis: data.map((value, i) => ({
1074
- label: `Day ${i + 1}`,
1075
- value,
1076
- position: { startsXLabel: i * 80, endsXLabel: (i + 1) * 80 }
1077
- })),
1078
- yAxis: data
1079
- }
1080
- }
1081
- });
1082
-
1083
- return chart;
1084
- }
1085
- ```
1086
-
1087
- ### 🖼️ **Batch Image Processing**
1088
-
1089
- ```typescript
1090
- // image-processor.ts
1091
- import { ApexPainter } from 'apexify.js';
1092
-
1093
- async function processUserUploads(images: string[]) {
1094
- const painter = new ApexPainter();
1095
-
1096
- // Process all images in parallel
1097
- const results = await painter.batch(
1098
- images.map(image => ({
1099
- type: 'image' as const,
1100
- config: {
1101
- source: image,
1102
- x: 0,
1103
- y: 0,
1104
- filters: [{ type: 'gaussianBlur', radius: 5 }],
1105
- borderRadius: 20
1106
- }
1107
- }))
1108
- );
1109
-
1110
- // Save all processed images
1111
- await painter.saveMultiple(results, {
1112
- directory: './processed',
1113
- prefix: 'processed-',
1114
- naming: 'counter'
1115
- });
1116
-
1117
- return results;
1118
- }
1119
- ```
308
+ - **Rust-Powered**: Built on @napi-rs/canvas for native performance
309
+ - **Optimized Algorithms**: Efficient image processing and rendering
310
+ - **Batch Processing**: Process multiple operations in parallel
311
+ - **Memory Efficient**: Smart resource management and cleanup
1120
312
 
1121
313
  ---
1122
314
 
1123
- ## 🎓 Learning Resources
315
+ ## 📚 Documentation
1124
316
 
1125
- ### 📺 **Video Tutorials**
1126
- Comprehensive video series covering:
1127
- - Getting started with ApexPainter
1128
- - Next.js integration
1129
- - Discord bot development
1130
- - Building design tools
1131
- - Advanced features and techniques
317
+ - **Full Documentation**: [https://apexifyjs.vercel.app](https://apexifyjs.vercel.app)
318
+ - **GitHub Repository**: [https://github.com/EIAS79/Apexify.js](https://github.com/EIAS79/Apexify.js)
319
+ - **Changelog**: See [CHANGELOG.md](./CHANGELOG.md) for version history
1132
320
 
1133
- ### 📚 **Documentation**
1134
- - [Full API Reference](https://apexifyjs.vercel.app)
1135
321
  ---
1136
322
 
1137
323
  ## 🤝 Contributing
1138
324
 
1139
- We welcome contributions! Here's how you can help:
1140
-
1141
- 1. **Report Bugs**: Found a bug? Open an issue with detailed information
1142
- 2. **Feature Requests**: Have an idea? We'd love to hear it!
1143
- 3. **Code Contributions**: Submit pull requests for improvements
1144
- 4. **Documentation**: Help improve our docs and examples
1145
-
1146
- ### Development Setup
1147
-
1148
- ```bash
1149
- # Clone the repository
1150
- git clone https://github.com/EIAS79/Apexify.js.git
1151
-
1152
- # Install dependencies
1153
- npm install
1154
-
1155
- # Run tests
1156
- npm test
1157
-
1158
- # Build the project
1159
- npm run build
1160
- ```
1161
-
1162
- ---
1163
-
1164
- ## 📞 Support & Community
1165
-
1166
- <div align="center">
1167
-
1168
- ### Join Our Discord Community
1169
-
1170
- [![Jedi Studio](https://img.shields.io/badge/Discord-Jedi%20Studio-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/CS2NRSPyze)
1171
- [![Ethical Programming](https://img.shields.io/badge/Discord-FresedGPT-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/94qUZWhwFE)
1172
-
1173
-
1174
- ### Documentation & Resources
1175
-
1176
- [![Documentation](https://img.shields.io/badge/Docs-Apexify.js-blue?style=for-the-badge)](https://apexifyjs.vercel.app)
1177
- [![Support Server](https://img.shields.io/badge/Support-Discord-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/mDyXV9hzXw)
1178
-
1179
- </div>
325
+ Contributions are welcome! Please feel free to submit a Pull Request.
1180
326
 
1181
327
  ---
1182
328
 
1183
329
  ## 📄 License
1184
330
 
1185
- This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
331
+ MIT License - see [LICENSE](./LICENSE) file for details.
1186
332
 
1187
333
  ---
1188
334
 
1189
- ## 🙏 Acknowledgments
335
+ ## Star History
1190
336
 
1191
- - **@napi-rs/canvas** - High-performance canvas rendering
1192
- - **Sharp** - Professional image processing
1193
- - **Jimp** - JavaScript image manipulation
1194
- - **TypeScript** - Type-safe development
337
+ If you find Apexify.js useful, please consider giving it a star on GitHub!
1195
338
 
1196
339
  ---
1197
340
 
1198
341
  <div align="center">
1199
342
 
1200
- **Made with ❤️ by [Jedi Studio](https://discord.gg/CS2NRSPyze)**
343
+ **Made with ❤️ by the Apexify.js community**
1201
344
 
1202
- *Create stunning visuals with ApexPainter - The ultimate canvas library for Node.js*
345
+ [Documentation](https://apexifyjs.vercel.app) [GitHub](https://github.com/EIAS79/Apexify.js) [npm](https://www.npmjs.com/package/apexify.js) [Report Bug](https://github.com/EIAS79/Apexify.js/issues)
1203
346
 
1204
347
  </div>