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