Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A function that helps to apply LUT to image. Make sure to change the canvas IDs or to create temporary canvases.
/**
* Created by Karlen on 13-Aug-14.
*/
var imageContext = document.getElementById('imageCanvas').getContext('2d'),
lutContext = document.getElementById('lutCanvas').getContext('2d');
function applyLUT(image, lut) {
var imageData, lutData, iData, lData;
imageContext.clearRect(0, 0, image.naturalWidth, image.naturalHeight);
imageContext.drawImage(image, 0, 0);
imageData = imageContext.getImageData(0, 0, image.naturalWidth, image.naturalHeight);
iData = imageData.data;
lutContext.clearRect(0, 0, lut.naturalWidth, lut.naturalHeight);
lutContext.drawImage(lut, 0, 0);
lutData = lutContext.getImageData(0, 0, lut.naturalWidth, lut.naturalHeight);
lData = lutData.data;
for (var i = 0, l = iData.length; i < l; i += 4) {
var r, g, b;
r = Math.floor(iData[i] / 4);
g = Math.floor(iData[i + 1] / 4);
b = Math.floor(iData[i + 2] / 4);
var lutX, lutY, lutIndex;
lutX = (b % 8) * 64 + r;
lutY = Math.floor(b / 8) * 64 + g;
lutIndex = (lutY * lut.naturalWidth + lutX) * 4;
var lutR, lutG, lutB;
lutR = lData[lutIndex];
lutG = lData[lutIndex + 1];
lutB = lData[lutIndex + 2];
iData[i] = lutR;
iData[i + 1] = lutG;
iData[i + 2] = lutB;
}
imageData.data = iData;
imageContext.clearRect(0, 0, image.naturalWidth, image.naturalHeight);
imageContext.putImageData(imageData, 0, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment