Converts dropped image files to sRGB

color-space-converter.tsx

"use client";
/* 
    Takes a file via an input
    draws it on an offscreencanvas
    gets the bitmap from the offscreen canvas
    creates an image from the bitmap
    displays the image
    
*/
import { useDropzone } from "react-dropzone";

export const SpaceConverter = () => {
  const onDrop = (acceptedFiles: File[]) => {
    console.log("Files:", acceptedFiles);
    acceptedFiles.forEach((file) => {
      convertToSRGB(file).then((srgbFile) => {
        const img = document.createElement("img");
        img.src = URL.createObjectURL(srgbFile!);
        downloadImage(img);
      });
    });
  };
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <div {...getRootProps()} className="w-full h-full flex items-center justify-center">
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>Drop the files here ...</p>
        ) : (
          <p>Drag and drop some files here, or click to select files</p>
        )}
      </div>
    </div>
  );
};

async function loadImage(file: File) {
  return new Promise((resolve, reject) => {
    const url = URL.createObjectURL(file);
    const img = new Image();

    img.onload = () => {
      URL.revokeObjectURL(url); // Clean up the object URL
      resolve(img);
    };

    img.onerror = () => {
      URL.revokeObjectURL(url); // Clean up the object URL
      reject(new Error("Failed to load image"));
    };

    img.src = url;
  });
}

async function convertToSRGB(file: File) {
  try {
    const img = (await loadImage(file)) as HTMLImageElement;
    const width = img.width;
    const height = img.height;

    // Create an OffscreenCanvas with the same dimensions as the image
    const offscreenCanvas = new OffscreenCanvas(width, height);
    const ctx = offscreenCanvas.getContext("2d", { colorSpace: "srgb" })!;

    // Draw the image onto the canvas
    ctx.drawImage(img, 0, 0, width, height);

    // Convert canvas to Blob
    const blob = await offscreenCanvas.convertToBlob({ type: "image/png" });

    // Optionally, create a new File from the Blob if you need a File object
    const srgbFile = new File([blob], file.name, { type: "image/png" });

    return srgbFile;
  } catch (error) {
    console.error("Error converting image to sRGB:", error);
  }
}

const downloadImage = (img: HTMLImageElement) => {
  const a = document.createElement("a");
  a.href = img.src;
  a.download = "image";
  a.click();
};