Add Glossy Reflections to Images Online Add a mirrored reflection below images with gradient fade.

The tool works by utilizing the HTML5 Canvas API to manipulate and render images. When a user drops an image file into the FileDropzone component, it triggers the handleFile function, which creates a URL object for the image using URL.createObjectURL. This URL is then used as the source for a new Image object, which is drawn onto a canvas element using the 2D drawing context. The canvas width and height are set to match the natural dimensions of the input image.

To create the reflection effect, the tool expands the canvas height to accommodate the reflected image and gap. It then draws the original image, followed by a flipped copy below it with a gradient mask applied. However, instead of using globalCompositeOperation, it uses the ctx.save and ctx.restore methods to save and restore the canvas state, allowing for transformations such as scaling and translating. The ctx.scale method is used with a value of -1 to flip the image vertically.

The gradient mask is created using the ctx.createLinearGradient method, which generates a linear gradient that transitions from an opaque white color at the top to a fully transparent white color at the bottom. This gradient is then applied as a fill style to the rectangle that covers the reflected image, creating a smooth fade-out effect. The result is a high-quality reflection with a natural-looking gradient that can be fine-tuned using the height, opacity, and gap settings.

The tool also uses React Hooks such as useState and useEffect to manage state changes and side effects, ensuring that the canvas is updated correctly when the input image or reflection settings change. Additionally, it uses the useRef Hook to create a reference to the canvas element, allowing for direct access to its properties and methods. When the user clicks the download button, the tool uses the canvas.toDataURL method to generate a PNG file containing the reflected image, which can then be saved locally.