Online Image Maker - Easy Way to Create Images from Text

This article details the mechanism, operation, and specifications of the provided web-based Image Composer tool, designed for creating custom image compositions using text and image stickers on a canvas.

1. The Engine Under the Hood: Technical Mechanism

The Image Composer operates using a hybrid architecture, leveraging both client-side and server-side technologies to deliver a fast and secure experience.

Component	Technology Used	Role
Client-Side	JavaScript (Fabric.js & jQuery), HTML, CSS (Tailwind)	The core of the design process. Fabric.js manages the interactive canvas, handles object rendering, scaling, rotation, style modifications (color, font, shadow, stroke), and real-time background changes (color/gradient). All interactive element manipulation occurs here for a responsive user experience.
Server-Side	PHP, GD Library	Primarily handles two critical, non-realtime tasks: Object Creation (returning Fabric.js JSON) and Final Export Processing (converting canvas PNG data to an optimized JPEG using the GD library).

2. How to Use the Composer

The workflow involves selecting an object, customizing its properties, and exporting the final artwork.

Start Composing: The canvas area is initialized with default dimensions (1200x800) and a white background.
Add Objects (Object Panel): Use the "Add Text" or "Add Sticker/Image" buttons to place elements on the canvas.
Select and Customize: Click on an object (text or image) to select it. Selection enables the property control panels (Fill, Stroke, Font, Shadow) on the left sidebar. Adjust properties like color, font, size, and apply shadows.
Manage Layers: Use the "Action" panel to move objects forward (⬆️ Forward) or backward (⬇️ Backward) in the stack, duplicate, or delete them.
Final Export (Canvas Panel): Enter a desired filename and click the Export button to save the final composition as a JPEG file.

3. Detailed Control Panel Functions

The left sidebar is organized into categories, activated by clicking the corresponding buttons at the top.

Panel	Key Controls	Function
Object	Text Input & Add Text	Creates a new text box on the canvas based on the input field content.
	Add Sticker/Image	Opens a file dialog to upload a new image that will be treated as an object (sticker).
Background	BG Type Radio Buttons	White (default solid color), Gradient (enables color/direction inputs), or Image (enables file input). Changes are applied instantly.
Fill	Fill Color Input	Changes the primary fill color of the currently selected Text object.
Stroke	Stroke Color/Width	Adjusts the color and thickness of the border/stroke around the selected Text object.
Font	Font Select	Changes the font family of the selected Text object.
Align	Left, Center, Right Buttons	Sets the text alignment within the bounding box of the selected Text object.
Shadow	Toggle, Color, Offset, Blur	Applies or removes a shadow effect to the selected object (text or image). Controls allow fine-tuning the shadow's color, position (Offset X/Y), and softness (Blur).
Action	Duplicate	Creates an exact copy of the selected object, offset slightly on the canvas.
	Delete	Removes the selected object(s) from the canvas.
	Bring Forward / Send Backward	Changes the stacking order (Z-index) of the selected object relative to other elements.
Canvas	Width x Height Input & Change	Allows you to redefine the canvas's absolute resolution (in pixels).
	Filename & Export	Sets the desired name for the output file and triggers the server-side image processing and download.

4. Image Specifications and Limitations

To ensure stability and manage server load, the tool implements specific constraints on the files it handles.

Allowed Image Types (Input & Output)

Context	Allowed File Types	Format Used for Transfer/Processing
Sticker/Image Input	PNG, JPEG, JPG	Base64 Data URL
Background Image Input	PNG, JPEG, JPG	Base64 Data URL
Final Output (Export)	PNG (Canvas data) → JPEG (Server-processed for download)	JPEG

Content Limitations

Item	Limit	Purpose
Text	Maximum 500 characters.	Prevents excessive data size and ensures text boxes remain manageable.
Base64 File Size	Maximum 20 MB (20,971,520 bytes)	This limit applies to all Base64 transfers: adding a new sticker/image, and sending the final canvas data for export. This constraint is crucial for security and preventing HTTP Request Entity Too Large errors on the server.
Output Format	Converted to JPEG (Quality 85).	The final image is converted by PHP's GD library from the canvas's PNG data to a compressed JPEG file for efficiency and universal compatibility.