Add Image to Data URL Tool

src/pages/ImageToDataUrl.jsx

@@ -0,0 +1,247 @@
+import { useState, useRef } from "react";
+import { toast } from "react-toastify";
+import ToolBoxLayout from "@/common/ToolBoxLayout";
+import ToolBox from "@/common/ToolBox";
+import Btn from "@/common/BasicBtn";
+import CopyBtn from "@/common/CopyBtn";
+import cn from "@/utils/cn";
+
+const ImageToDataUrl = () => {
+  const [file, setFile] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState("");
+  const [dataUrl, setDataUrl] = useState("");
+  const [svgUrlEncoded, setSvgUrlEncoded] = useState("");
+  const [outputType, setOutputType] = useState("base64"); // 'base64' or 'url-encoded'
+  // const [isProcessing, setIsProcessing] = useState(false); // Unused for now as operations are fast enough or async handled simply
+
+  const fileInputRef = useRef(null);
+
+  // Constants
+  const RECOMMENDED_SIZE_BYTES = 200 * 1024; // 200KB
+  const SUPPORTED_TYPES = [
+    "image/png",
+    "image/jpeg",
+    "image/jpg",
+    "image/gif",
+    "image/webp",
+    "image/svg+xml",
+  ];
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      processFile(selectedFile);
+    }
+  };
+
+  const processFile = (selectedFile) => {
+    if (!SUPPORTED_TYPES.includes(selectedFile.type)) {
+      toast.error(
+        "Unsupported file type. Please select PNG, JPG, GIF, WEBP, or SVG."
+      );
+      return;
+    }
+
+    // setIsProcessing(true);
+    setFile(selectedFile);
+
+    // Create preview URL
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    const objectUrl = URL.createObjectURL(selectedFile);
+    setPreviewUrl(objectUrl);
+
+    // Reset output
+    setDataUrl("");
+    setSvgUrlEncoded("");
+    setOutputType("base64");
+
+    // Base64 Reader
+    const reader = new FileReader();
+    reader.onload = () => {
+      setDataUrl(reader.result);
+      // setIsProcessing(false);
+    };
+    reader.onerror = () => {
+      toast.error("Error reading file.");
+      // setIsProcessing(false);
+    };
+    reader.readAsDataURL(selectedFile);
+
+    // SVG URL Encoded Reader
+    if (selectedFile.type === "image/svg+xml") {
+      const textReader = new FileReader();
+      textReader.onload = () => {
+        const content = textReader.result;
+        // Basic URL encoding for SVG data URI
+        // Using encodeURIComponent but ensuring quotes are safer
+        const encoded =
+          "data:image/svg+xml," +
+          encodeURIComponent(content)
+            .replace(/'/g, "%27")
+            .replace(/"/g, "%22");
+        setSvgUrlEncoded(encoded);
+      };
+      textReader.readAsText(selectedFile);
+    }
+  };
+
+  const handleClear = () => {
+    setFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl("");
+    setDataUrl("");
+    setSvgUrlEncoded("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  const isLargeFile = file && file.size > RECOMMENDED_SIZE_BYTES;
+  const isSvg = file && file.type === "image/svg+xml";
+
+  const currentOutput =
+    outputType === "url-encoded" && isSvg ? svgUrlEncoded : dataUrl;
+
+  return (
+    <ToolBoxLayout>
+      <ToolBox title="Input Image">
+        <div className="flex flex-col gap-4 h-full">
+          <div className="p-4 border-2 border-dashed border-gray-600 rounded-lg text-center hover:border-gray-400 transition-colors">
+            <input
+              type="file"
+              accept=".png,.jpg,.jpeg,.gif,.webp,.svg"
+              onChange={handleFileChange}
+              ref={fileInputRef}
+              className="hidden"
+            />
+            <div className="flex flex-col items-center gap-3">
+              <p className="text-gray-300">
+                Supported formats: PNG, JPG, GIF, WEBP, SVG
+              </p>
+              <p className="text-gray-400 text-sm">
+                Recommended size: &lt; 200KB
+              </p>
+              <Btn
+                btnText="Select Image"
+                onClick={() => fileInputRef.current?.click()}
+                classNames="!w-40"
+              />
+            </div>
+          </div>
+
+          {file && (
+            <div className="flex flex-col md:flex-row gap-6 mt-4">
+              <div className="w-full md:w-1/3 flex items-center justify-center bg-gray-800/50 rounded-lg p-4 min-h-[200px]">
+                {previewUrl && (
+                  <img
+                    src={previewUrl}
+                    alt="Preview"
+                    className="max-w-full max-h-[300px] object-contain"
+                  />
+                )}
+              </div>
+
+              <div className="w-full md:w-2/3 space-y-3">
+                <h3 className="text-xl font-semibold text-white">Image Info</h3>
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div className="text-gray-400">Name:</div>
+                  <div className="text-white truncate" title={file.name}>{file.name}</div>
+
+                  <div className="text-gray-400">Size:</div>
+                  <div className={cn("text-white", isLargeFile ? "text-yellow-400 font-bold" : "")}>
+                    {formatFileSize(file.size)}
+                  </div>
+
+                  <div className="text-gray-400">Type:</div>
+                  <div className="text-white">{file.type}</div>
+                </div>
+
+                {isLargeFile && (
+                  <div className="mt-4 p-3 bg-yellow-900/30 border border-yellow-600/50 rounded text-yellow-200 text-sm">
+                    Warning: Image is larger than recommended (200KB). Data URLs can significantly increase file size and affect page load performance.
+                  </div>
+                )}
+
+                <Btn
+                  btnText="Clear"
+                  onClick={handleClear}
+                  classNames="bg-red-600 hover:bg-red-700 mt-4 !w-32"
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </ToolBox>
+
+      <ToolBox title="Data URL Output">
+        <div className="flex flex-col h-full">
+          {file ? (
+            <>
+              {isSvg && (
+                <div className="flex gap-4 mb-4 border-b border-gray-700 pb-2">
+                  <button
+                    onClick={() => setOutputType("base64")}
+                    className={cn(
+                      "px-4 py-2 rounded-t-lg transition-colors text-sm font-medium focus:outline-none",
+                      outputType === "base64"
+                        ? "bg-gray-700 text-white"
+                        : "text-gray-400 hover:text-gray-200 hover:bg-gray-800"
+                    )}
+                  >
+                    Base64
+                  </button>
+                  <button
+                    onClick={() => setOutputType("url-encoded")}
+                    className={cn(
+                      "px-4 py-2 rounded-t-lg transition-colors text-sm font-medium focus:outline-none",
+                      outputType === "url-encoded"
+                        ? "bg-gray-700 text-white"
+                        : "text-gray-400 hover:text-gray-200 hover:bg-gray-800"
+                    )}
+                  >
+                    URL Encoded (SVG)
+                  </button>
+                </div>
+              )}
+
+              <div className="relative flex-grow min-h-[200px] bg-gray-900 rounded-lg border border-gray-700 p-2 overflow-hidden">
+                <textarea
+                  readOnly
+                  value={currentOutput}
+                  className="w-full h-full bg-transparent text-gray-300 font-mono text-xs resize-none focus:outline-none p-2"
+                  placeholder="Data URL will appear here..."
+                />
+              </div>
+
+              <div className="flex justify-end mt-4">
+                <CopyBtn
+                  copyText={currentOutput}
+                  btnText="Copy Data URL"
+                  styles={{ width: "200px" }}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full text-gray-500 italic">
+              Upload an image to generate Data URL
+            </div>
+          )}
+        </div>
+      </ToolBox>
+    </ToolBoxLayout>
+  );
+};
+
+export default ImageToDataUrl;

src/routes.jsx

@@ -22,6 +22,7 @@ import {
    Table,
    Network,
    Share2,
+   Link,
 } from "lucide-react";
 
 import HomePage from "@/Home";
@@ -49,6 +50,7 @@ const ImageMetadataViewer = lazy(() => import("@/pages/ImageMetadataViewer"));
 const TextStylingTool = lazy(() => import("@/pages/CssTextStyling"));
 const CsvToTable = lazy(() => import("@/pages/CsvToTable"));
 const ApiTester = lazy(() => import("@/pages/ApiTester"));
+const ImageToDataUrl = lazy(() => import("@/pages/ImageToDataUrl"));
 import Websites from "@/pages/Websites";
 // import Test from "@/pages/testing/Test"; // Testing purpose
 import NoPage from "@/pages/NoPage";
@@ -210,6 +212,16 @@ const routes = [
       category: "Image",
       icon: <Eye className={size5} />,
    },
+   {
+      isNew: true,
+      path: "image-to-data-url",
+      element: <ImageToDataUrl />,
+      isLazy: true,
+      description:
+         "Convert images to Data URLs (Base64 or URL-encoded) for use in CSS, HTML, or JavaScript.",
+      category: "Image",
+      icon: <Link className={size5} />,
+   },
    {
       path: "string-converter",
       element: <StringConverter />,