Create Duotone Effects Online Apply duotone effect by mapping tones to two custom colors.

The tool works by using the React library to create a user interface for selecting an image and adjusting its duotone effect. When an image is dropped into the FileDropzone component, it creates a URL object for the file using the URL.createObjectURL method, which allows the image to be loaded into a canvas element. The canvas element is then used to render the image and apply the duotone filter. This filter works by iterating over each pixel in the image data, calculating its luminance value using the formula t = (d[i]*0.299+d[i+1]*0.587+d[i+2]*0.114)/255, where d[i] represents the red, green, and blue color channels of the pixel. The tool then uses linear interpolation to calculate the output color for each channel, based on the shadow and highlight colors selected by the user.

The hexToRgb function is used to convert the hexadecimal color values entered by the user into RGB format, which can be used in the canvas element's context. The presets feature allows users to quickly apply predefined duotone effects, such as '#001f3f' and '#ff6b6b', by mapping these color combinations to specific shadow and highlight colors. When the user clicks the Apply button, the processImage function is called, which renders the filtered image onto the canvas element using the ctx.putImageData method. The resulting image can then be downloaded as a PNG file using the canvas.toDataURL method, or reset to its original state using the URL.revokeObjectURL method.

The tool uses React Hooks such as useState and useCallback to manage its state and optimize performance. For example, the handleFile function is memoized using useCallback to prevent unnecessary re-renders when the user selects a new image file. The useEffect Hook is also used to ensure that the image URL object is revoked when the component unmounts, preventing memory leaks. By combining these technologies and algorithms, the tool provides an efficient and intuitive way to apply duotone effects to images in the browser.