Convert PNG, JPEG, or PDF files into a Canvas.js (Fabric.js) object and view the generated code for easy use in your web projects.
This tool also supports AI-powered image generation through an integrated n8n workflow, allowing you to generate visuals from text prompts directly on the canvas.
- 🖼 Upload image files (
.png,.jpg,.jpeg) or PDF documents. - 🤖 Generate images from text prompts via n8n workflow integration.
- 📄 Render files directly onto an HTML5
<canvas>using Fabric.js. - 💻 Export canvas state as Canvas.js code (JSON format).
- 🔗 Option to embed images as base64 or external URL.
- 📋 Copy or clear generated code easily from the UI.
- 🧼 Clean Bootstrap 5.3 UI with responsive layout.
file-to-canvasjs-converter/ │ ├── index.html # Main HTML structure ├── style.css # Custom styles ├── app.js # Core logic (Fabric.js, PDF.js, n8n workflow integration) └── README.md # Project documentation
- HTML5, CSS3, JavaScript (ES6)
- Bootstrap 5.3
- Fabric.js 5.3
- PDF.js
- n8n for AI image generation workflow
- Upload File: Choose any supported file type (
.png,.jpg,.jpeg,.pdf). - Generate Image: (Optional) Enter a text prompt and generate an image via n8n workflow.
- Preview Canvas: The canvas displays the uploaded background image, first page of a PDF, or generated AI image.
- Generate Code: Click "Generate Code" to view the
canvas.loadFromJSON()object. - Copy/Use Code: Toggle the base64 option or copy the code to reuse in your projects.
-
Clone or download this repository:
-
Open
index.htmlin your browser. -
Upload a file or generate an AI image, then generate Canvas.js code for your projects.
- PDF rendering only displays the first page.
- Image background is scaled to fit the canvas.
- Use the Include Base64 checkbox to decide how the image is embedded.
- n8n workflow requires a configured webhook endpoint for AI image generation.
Pull requests and improvements are welcome! If you'd like to add more file format support, AI features, or workflow enhancements, feel free to fork this project.
Happy coding! 💻✨