Tilt Shift Image Effect Online Create a miniature/tilt-shift effect by blurring above and below a focal band.

Under the hood, Image Tilt Shift relies on the HTML5 Canvas API to manipulate images. When an image file is dropped into the tool, it uses the `URL.createObjectURL` method to create a blob URL that can be used as the source for an `img` element. The image is then drawn onto a canvas element using the `drawImage` method of the 2D drawing context. To achieve the tilt shift effect, the code applies a blur filter to the entire image using the `filter` property of the 2D context, set to `blur(${blurAmount}px)`. This blurred version is then combined with the original sharp image by iterating over each pixel and calculating a weighted average based on the distance from the focal point.

The calculation uses the `position`, `bandWidth`, and `blurAmount` values to determine the amount of blur to apply at each pixel. The `position` value controls the vertical position of the focal band, while `bandWidth` determines its height. The `blurAmount` value sets the intensity of the blur effect in pixels. By adjusting these parameters, users can fine-tune the tilt shift effect to achieve the desired level of selective blur. The resulting image is then rendered on the canvas element using the `putImageData` method and finally converted to a PNG file format using the `toDataURL` method.

The React library is used to manage the tool's state and handle user interactions, such as adjusting the focus position, band width, and blur amount. When the user clicks the "Apply" button, the `processImage` function is called, which triggers the image processing pipeline. This involves loading the image onto the canvas, applying the blur filter, and compositing the sharp and blurred versions using a gradient mask. The resulting image is then displayed in a preview area, allowing users to review and refine their settings before downloading the final result.