1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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;
}
|