Image Oil Paint Transform photos into oil painting style with brush stroke simulation.

The tool works under the hood by utilizing React's useState and useRef hooks to manage the image state and canvas reference. When an image is dropped into the FileDropzone component, it creates a URL object for the file using URL.createObjectURL, which is then set as the image state. The useEffect hook ensures that this URL object is revoked when the image is changed or reset, preventing memory leaks.

The processImage function uses the HTMLCanvasElement's 2D drawing context to draw the original image onto a canvas element. It then retrieves the image data from the canvas using ctx.getImageData and processes it by iterating over each pixel. For each pixel, it examines neighboring pixels within a specified radius, bins them by intensity level, finds the mode (the most frequent intensity level), and outputs the average color of that bin. This is achieved through the use of Uint8ClampedArray to efficiently manipulate the image data.

The algorithm's time complexity is O(pixels × radius²) due to the nested loops iterating over each pixel and its neighbors within the specified radius. The intensity levels are divided into n bins, where n is a user-adjustable value between 5 and 30, allowing for control over the level of detail in the output image. The brush radius can also be adjusted by the user, ranging from 1 to 8 pixels, giving more flexibility to the oil paint effect. When the processImage function completes, it updates the result state with a PNG representation of the transformed image, which can then be downloaded or reset.

The canvas element is used in conjunction with React's useCallback hook to memoize the processImage function and prevent unnecessary re-renders. The download functionality uses the HTMLAnchorElement to create a downloadable link for the resulting image, allowing users to easily share or further edit their creations. By utilizing these technologies and algorithms, the tool efficiently transforms photos into oil paintings with adjustable levels of detail and texture.