diff options
| author | elioat <hi@eli.li> | 2024-08-18 17:50:14 -0400 |
|---|---|---|
| committer | elioat <hi@eli.li> | 2024-08-18 17:50:14 -0400 |
| commit | cef4955de167d20f38588da594ecd21ea663f028 (patch) | |
| tree | 5c72627dcebd1b0f45c996e0640dc3315e1e4c53 /js/lut-cam | |
| parent | 9f6bfa0fc299615b2676bfaa2b6b3a7ee8063531 (diff) | |
| download | tour-cef4955de167d20f38588da594ecd21ea663f028.tar.gz | |
*
Diffstat (limited to 'js/lut-cam')
| -rw-r--r-- | js/lut-cam/lut-extraction/index.html | 25 | ||||
| -rw-r--r-- | js/lut-cam/lut-extraction/sample.jpeg | bin | 0 -> 103831 bytes | |||
| -rw-r--r-- | js/lut-cam/lut-extraction/script.js | 86 |
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; +} |
