Edit Image Metadata in Your Browser View and edit common image metadata fields like title, description, and author.

The Image Metadata Editor utilizes React's useState and useRef hooks to manage its state and references to DOM elements, such as the canvas element where the image is rendered. When an image file is uploaded, it creates a URL object using URL.createObjectURL, which allows the image to be displayed in the browser without having to upload it to a server. The useEffect hook is used to clean up this object URL when the component unmounts or the image changes.

The tool uses the HTML5 Canvas API to render the image and apply metadata. When exporting the image, it creates a new Image object, sets its source to the uploaded image, and waits for it to load. Once loaded, it draws the image onto the canvas using the drawImage method. The metadata is then encoded as a JSON string and drawn onto the canvas using the fillText method with a transparent font color, effectively hiding it from view.

The custom fields are stored in an array of MetaField objects, which contain key-value pairs for each field. When adding or editing custom fields, the tool updates this array using the updateCustom callback function. The exportImage function combines the standard and custom fields into a single array, filters out any empty fields, and converts them to a JSON string.

The download functionality uses the toDataURL method of the canvas element to generate a PNG image with the applied metadata. This image is then saved to a file using the createObjectURL method and a dynamically created anchor element. The tool also includes error handling and edge cases, such as checking if the image or result is null before attempting to export or download it.

The editor's use of React's useCallback hook ensures that functions like updateField, addCustom, and exportImage are only recreated when their dependencies change, which helps improve performance by reducing unnecessary re-renders. The canvasRef is used to access the canvas element in the exportImage function, allowing the tool to render the image and apply metadata in a single step.