3 files changed, 111 insertions, 0 deletions
diff --git a/js/lut-cam/lut-extraction/index.html b/js/lut-cam/lut-extraction/index.html
new file mode 100644
index 0000000..4202e8f
--- /dev/null
+++ b/js/lut-cam/lut-extraction/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LUT Profile Extractor</title>
+    <style>
+       body {    
+            width: 100%;
+            height: 100%;
+            background-color: beige;
+        }
+    </style>
+</head>
+<body>
+    <h1>LUT Profile Extractor</h1>
+    <input type="file" id="lut-upload" accept="image/png">
+    <canvas id="lut-preview" style="display:none;"></canvas>
+    <canvas id="sample-output"></canvas>
+    <img id="sample-image" src="sample.jpeg" alt="Photograph of a colorful parrot." />
+    <h2>LUT Profile JS Code:</h2>
+    <pre id="lut-code"></pre>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/js/lut-cam/lut-extraction/sample.jpeg b/js/lut-cam/lut-extraction/sample.jpeg
new file mode 100644
index 0000000..adea4b9
--- /dev/null
+++ b/js/lut-cam/lut-extraction/sample.jpeg
Binary files differdiff --git a/js/lut-cam/lut-extraction/script.js b/js/lut-cam/lut-extraction/script.js
new file mode 100644
index 0000000..f4baeee
--- /dev/null
+++ b/js/lut-cam/lut-extraction/script.js
@@ -0,0 +1,86 @@
+document.getElementById('lut-upload').addEventListener('change', function(event) {
+    const file = event.target.files[0];
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const img = new Image();
+            img.src = e.target.result;
+            img.onload = function() {
+                const lutCanvas = document.getElementById('lut-preview');
+                const lutContext = lutCanvas.getContext('2d');
+                lutCanvas.width = img.width;
+                lutCanvas.height = img.height;
+                lutContext.drawImage(img, 0, 0);
+
+                const lutData = lutContext.getImageData(0, 0, lutCanvas.width, lutCanvas.height).data;
+                const lutWidth = img.width;
+                const lutHeight = img.height;
+                const lutSize = Math.cbrt(lutWidth * lutHeight);
+
+                const sampleImage = document.getElementById('sample-image');
+                sampleImage.onload = function() {
+                    applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize);
+                };
+
+                if (sampleImage.complete) {
+                    applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize);
+                }
+
+                outputLUTAsJSCode(lutData, lutWidth, lutHeight, lutSize);
+            };
+        };
+        reader.readAsDataURL(file);
+    }
+});
+
+function applyLUTToSampleImage(lutData, lutWidth, lutHeight, lutSize) {
+    const sampleImage = document.getElementById('sample-image');
+    const outputCanvas = document.getElementById('sample-output');
+    const outputContext = outputCanvas.getContext('2d');
+
+    outputCanvas.width = sampleImage.width;
+    outputCanvas.height = sampleImage.height;
+    outputContext.drawImage(sampleImage, 0, 0);
+
+    const imageData = outputContext.getImageData(0, 0, outputCanvas.width, outputCanvas.height);
+    const pixels = imageData.data;
+
+    for (let i = 0; i < pixels.length; i += 4) {
+        const r = pixels[i];
+        const g = pixels[i + 1];
+        const b = pixels[i + 2];
+
+        const lutX = Math.floor(r / 255 * (lutSize - 1));
+        const lutY = Math.floor(g / 255 * (lutSize - 1));
+        const lutZ = Math.floor(b / 255 * (lutSize - 1));
+
+        const lutIndex = ((lutZ * lutSize + lutY) * lutSize + lutX) * 4;
+
+        pixels[i] = lutData[lutIndex];
+        pixels[i + 1] = lutData[lutIndex + 1];
+        pixels[i + 2] = lutData[lutIndex + 2];
+    }
+
+    outputContext.putImageData(imageData, 0, 0);
+}
+
+function outputLUTAsJSCode(lutData, lutWidth, lutHeight, lutSize) {
+    const lutCodeElement = document.getElementById('lut-code');
+    let lutCode = 'const lut = [\n';
+
+    for (let z = 0; z < lutSize; z++) {
+        lutCode += '  [\n';
+        for (let y = 0; y < lutSize; y++) {
+            lutCode += '    [\n';
+            for (let x = 0; x < lutSize; x++) {
+                const index = ((z * lutSize + y) * lutSize + x) * 4;
+                lutCode += `      { r: ${lutData[index]}, g: ${lutData[index + 1]}, b: ${lutData[index + 2]} },\n`;
+            }
+            lutCode += '    ],\n';
+        }
+        lutCode += '  ],\n';
+    }
+
+    lutCode += '];\n';
+    lutCodeElement.textContent = lutCode;
+}