Create Custom Placeholder Images Generate customizable placeholder images with solid colors or gradients for mockups and prototyping.

The tool uses the React library to manage its state and side effects, specifically employing the useState and useEffect hooks to store and update the image settings, such as width, height, background type, colors, and text. When the user interacts with the interface, these state changes trigger a re-render of the canvas element, which is referenced using the useRef hook. The HTML5 Canvas API is then utilized to draw the background, either as a solid color or a gradient created via the createLinearGradient method, and render the text overlay with automatic font sizing based on the image dimensions.

The useEffect hook ensures that the canvas is updated whenever any of the dependent state variables change, such as when the user selects a new preset size or adjusts the background colors using hex codes like #334155 or #6366f1. The tool also leverages JavaScript's built-in parsing capabilities to convert the width and height input values to integers, defaulting to 400 and 300 respectively if the inputs are invalid. Additionally, it uses the toDataURL method of the canvas element to export the generated image as a PNG, JPEG, or WebP file, depending on the user's selected format, with a quality setting of 0.92 for JPEG exports.

The download functionality is implemented using a dynamically created anchor element, which is assigned the generated image data as its href attribute and simulates a click event to initiate the download process. The tool also takes advantage of CSS classes like glass-card and glass-input to style its interface, making it visually appealing and user-friendly. By combining these technologies and APIs, the tool provides a powerful and flexible solution for generating custom placeholder images with precise control over their appearance and output format.