Convert Images to Base64 Data URIs Convert images to Base64-encoded data URIs for embedding in HTML, CSS, and code.

The tool works by using the FileReader API to read the dropped image file and produce a data URI. This process involves reading the file as a data URL, which returns a string that starts with "data:" followed by the MIME type of the file and the Base64-encoded data. The readAsDataURL method is asynchronous, so it uses an onload event handler to process the result when it becomes available. Once the data URI is generated, it extracts the raw Base64 string by splitting the data URI at the comma separator and taking the second part.

The tool then stores this Base64 string in the component's state using the setResult function from React. It also calculates the length of the Base64 string and displays it to the user. When the user clicks the copy button, it uses the navigator.clipboard.writeText method to write the data URI or raw Base64 string to the system clipboard. The setTimeout function is used to reset the copied state after a 2-second delay.

The data URI generated by the tool follows the format specified in RFC 2397, which defines the data URL scheme. This scheme allows embedding small files directly into HTML documents, reducing the need for separate HTTP requests. The tool also generates a ready-to-paste HTML img tag that uses the data URI as its src attribute. This makes it easy to embed the image in an HTML document without having to make a separate request for the image file.

The use of React's useState and useCallback hooks allows the tool to manage its state and handle events efficiently. The FileDropzone component from the @/components/shared directory handles the file drop event and passes the selected file to the handleFile function, which initiates the encoding process. The glass-card and glass-button classes are used to style the output sections and buttons, providing a visually appealing interface for the user.