80 lines
2.4 KiB
HTML
80 lines
2.4 KiB
HTML
<!doctype html>
|
|
|
|
<!--[if lt IE 7 ]> <html class="ie ie6 ie-lt10 ie-lt9 ie-lt8 ie-lt7 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 7 ]> <html class="ie ie7 ie-lt10 ie-lt9 ie-lt8 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]> <html class="ie ie8 ie-lt10 ie-lt9 no-js" lang="en"> <![endif]-->
|
|
<!--[if IE 9 ]> <html class="ie ie9 ie-lt10 no-js" lang="en"> <![endif]-->
|
|
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<!--
|
|
HTML5 Reset: https://github.com/murtaugh/HTML5-Reset
|
|
Free to use
|
|
-->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
|
<title>LUT image transform proof of concept</title>
|
|
<meta name="author" content="Peter Marquardt" />
|
|
<meta name="description" content="Proof of concept" />
|
|
|
|
<meta name="Copyright" content="Peter Marquardt" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="assets/css/reset.css" />
|
|
<link rel="stylesheet" href="assets/css/style.css" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="wrapper">
|
|
<img id="LUT"><canvas id="result" width="4096" height="4096"></canvas><br />
|
|
</div>
|
|
|
|
<script src="assets/js/libs/jquery-1.11.3.min.js"></script>
|
|
<script>
|
|
function initPage(){
|
|
|
|
var canvas = document.getElementById('result');
|
|
var context = canvas.getContext('2d');
|
|
|
|
var lutsegment = context.getImageData(0, 0, 256, 256);
|
|
var lutsegmentdata = lutsegment.data;
|
|
|
|
for (r = 0; r < 256; r += 1) {
|
|
for (g = 0; g < 256; g += 1) {
|
|
var lutx = r;
|
|
var luty = 256 - g - 1;
|
|
lutsegmentdata[(lutx + luty * 256)*4 ] = 255 * r / 255;
|
|
lutsegmentdata[(lutx + luty * 256)*4 + 1] = 255 * g / 255;
|
|
lutsegmentdata[(lutx + luty * 256)*4 + 2] = 0;
|
|
lutsegmentdata[(lutx + luty * 256)*4 + 3] = 255; // Alpha Channel
|
|
}
|
|
}
|
|
|
|
for (b = 0; b < 256; b += 1) {
|
|
for(i=0; i < lutsegmentdata.length; i += 4) {
|
|
lutsegmentdata[i+2] = b;
|
|
}
|
|
context.putImageData(lutsegment, (b*256)%4096, Math.floor(b/16)*256);
|
|
}
|
|
|
|
$('#LUT').attr('src', canvas.toDataURL());
|
|
|
|
|
|
$('img, canvas').wrap('<span class="imglabel"></span>');
|
|
$('.imglabel').each(function() {
|
|
$(this).append('<span>'+$(this).find('img, canvas').attr('id')+'</span>');
|
|
});
|
|
|
|
};
|
|
</script>
|
|
<script>$(document).ready(initPage);</script>
|
|
|
|
</body>
|
|
</html>
|