Skip to content

Commit

Permalink
Add RGB mode to Tone Curve Estimation #19
Browse files Browse the repository at this point in the history
  • Loading branch information
@tshino
tshino committed Jul 17, 2017
1 parent 480c12d commit 8c56776
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 17 deletions.
4 changes: 4 additions & 0 deletions compare.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,10 @@ <h3>
<span class="en">Tone Curve Estimation</span>
<span class="ja">トーンカーブ推定</span>
</h3>
<div id="toneCurveType" class="mode-sw">
<button>1. RGB</button>
<button class="current">2. <span class="en">Luminance</span><span class="ja">輝度</span></button>
</div>
</div>
<div>
<table id="toneCurveTable">
Expand Down
55 changes: 43 additions & 12 deletions compare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ $( function() {
var index = $('#vectorscopeType > *').index(this);
changeVectorscopeType(index);
});
$('#toneCurveType > *').click(function() {
var index = $('#toneCurveType > *').index(this);
changeToneCurveType(index);
});
$('#diffIgnoreAE').on('change', function(e) {
diffOptions.ignoreAE = +this.value;
updateDiffTable();
Expand Down Expand Up @@ -127,7 +131,7 @@ $( function() {
sw.click();
return false;
}
if (($('#diff').is(':visible') || $('#toneCurve').is(':visible')) &&
if (($('#diff').is(':visible') /*|| $('#toneCurve').is(':visible')*/) &&
num - 1 < entries.length &&
entries[num - 1].ready() &&
baseImageIndex !== null && targetImageIndex !== null &&
Expand Down Expand Up @@ -296,6 +300,7 @@ $( function() {
var vectorscopeType = 0;
var baseImageIndex = null;
var targetImageIndex = null;
var toneCurveType = 1;
var toneCurveResult = {};
var diffResult = {};
var diffOptions = {
Expand Down Expand Up @@ -1325,8 +1330,10 @@ $( function() {
updateMetricsTable();
break;
case 'calcToneCurve':
if (toneCurveResult.base === data.index[0] &&
toneCurveResult.target === data.index[1]) {
if (data.type === toneCurveType &&
data.index[0] === toneCurveResult.base &&
data.index[1] === toneCurveResult.target) {
toneCurveResult.type = data.type;
toneCurveResult.result = data.result;
}
updateToneCurveTable();
Expand Down Expand Up @@ -1843,21 +1850,36 @@ $( function() {
})
);
};
var changeToneCurveType = function(type) {
if (toneCurveType !== type) {
toneCurveType = type;
discardTasksOfCommand('calcToneCurve');
toneCurveResult = {};
$('#toneCurveType > *').
removeClass('current').
eq(type).addClass('current');
updateToneCurveTable();
}
};
var updateToneCurveTable = function() {
$('#toneCurveResult *').remove();
if (false === setupBaseAndTargetSelector('#toneCurveBaseName', '#toneCurveTargetName', updateToneCurveTable)) {
return;
}
var a = entries[baseImageIndex];
var b = entries[targetImageIndex];
if (toneCurveResult.base !== baseImageIndex || toneCurveResult.target !== targetImageIndex) {
if (toneCurveResult.base !== baseImageIndex ||
toneCurveResult.target !== targetImageIndex ||
toneCurveResult.type !== toneCurveType) {
toneCurveResult.base = baseImageIndex;
toneCurveResult.target = targetImageIndex;
toneCurveResult.type = toneCurveType;
toneCurveResult.result = null;
discardTasksOfCommand('calcToneCurve');
if (baseImageIndex !== targetImageIndex) {
taskQueue.addTask({
cmd: 'calcToneCurve',
type: toneCurveType,
index: [a.index, b.index]
}, attachImageDataToTask);
}
Expand All @@ -1870,9 +1892,10 @@ $( function() {
if (toneCurveResult.result === null) {
$('#toneCurveResult').append(makeBlankFigure(8,8).canvas).css(cellStyle);
} else {
var result = toneCurveResult.result;
var numComponents = toneCurveResult.type === 0 ? 3 : 1;
var components = toneCurveResult.result.components;
var vbox = '0 0 ' + 320 + ' ' + 320;
var curvePaths = '';
var curvePaths = [];
var pointToCoord = function(p) {
var x = 32 + p[0];
var y = 288 - p[1];
Expand All @@ -1884,12 +1907,20 @@ $( function() {
return '<path opacity="' + opacity.toFixed(2) + '"' +
' d="M ' + pointToCoord(p0) + ' L ' + pointToCoord(p1) + '"></path>';
};
curvePaths += pointToPath(0, [0, 0], result.points[0]);
for (var i = 1, p0 = result.points[0], p1; p1 = result.points[i]; i++, p0 = p1) {
var conf = Math.min(result.conf[i - 1], result.conf[i]);
curvePaths += pointToPath(conf, p0, p1);
for (var c = 0; c < numComponents; ++c) {
var result = components[c];
var color = toneCurveResult.type === 0 ? ['#f00', '#0f0', '#00f'][c] : '#fff';
curvePaths[c] = '<g stroke="' + color + '" ' +
'style="mix-blend-mode: lighten" ' +
'fill="none" stroke-width="1">';
curvePaths[c] += pointToPath(0, [0, 0], result.points[0]);
for (var i = 1, p0 = result.points[0], p1; p1 = result.points[i]; i++, p0 = p1) {
var conf = Math.min(result.conf[i - 1], result.conf[i]);
curvePaths[c] += pointToPath(conf, p0, p1);
}
curvePaths[c] += pointToPath(0, result.points[result.points.length - 1], [256, 256]);
curvePaths[c] += '</g>';
}
curvePaths += pointToPath(0, result.points[result.points.length - 1], [256, 256]);
var axesDesc = 'M 32,16 L 32,288 L 304,288';
var scaleDesc = '';
for (var i = 1; i <= 10; ++i) {
Expand All @@ -1907,8 +1938,8 @@ $( function() {
'<g stroke="white" fill="none" stroke-width="1">' +
'<path stroke-width="0.1" d="' + scaleDesc + '"></path>' +
'<path stroke-width="0.5" d="' + axesDesc + '"></path>' +
curvePaths +
'</g>' +
curvePaths.join() +
'</svg>').
width(320).
height(320).
Expand Down
24 changes: 19 additions & 5 deletions modules/compare-worker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
result.result.ae = calcAE(data.imageData[0], data.imageData[1]);
break;
case 'calcToneCurve':
result.result = calcToneCurve(data.imageData[0], data.imageData[1]);
result.type = data.type;
result.result = calcToneCurve(data.imageData[0], data.imageData[1], data.type);
break;
case 'calcDiff':
result.result = calcDiff(data.imageData[0], data.imageData[1], data.options);
Expand Down Expand Up @@ -264,9 +265,7 @@ function calcMetrics( a, b )
return { psnr: psnr, mse: mse, ncc: ncc };
}

var calcToneCurve = function(a, b) {
var hist = [calcHistogram(a, 1), calcHistogram(b, 1)];
var total = [a.width * a.height, b.width * b.height ];
var calcToneCurveImpl = function(hist, offset, total) {
var result = {
cum : [ new Float32Array(1 + 256), new Float32Array(1 + 256) ],
min : [ 0, 0 ],
Expand All @@ -276,7 +275,7 @@ var calcToneCurve = function(a, b) {
var sum = 0;
result.cum[k][0] = 0;
for (var i = 0; i < 256; ++i) {
sum += hist[k][i];
sum += hist[k][i + offset];
result.cum[k][i + 1] = sum / total[k];
}
result.cum[k][256] = 1;
Expand Down Expand Up @@ -325,6 +324,21 @@ var calcToneCurve = function(a, b) {
}
return result;
};
var calcToneCurve = function(a, b, type) {
var hist = [calcHistogram(a, type), calcHistogram(b, type)];
var total = [a.width * a.height, b.width * b.height ];
var result = {
components : []
};
if (type === 0) { // RGB
result.components[0] = calcToneCurveImpl(hist, 0, total);
result.components[1] = calcToneCurveImpl(hist, 256, total);
result.components[2] = calcToneCurveImpl(hist, 512, total);
} else { // Luminance
result.components[0] = calcToneCurveImpl(hist, 0, total);
}
return result;
};

var imageUtil = (function() {
var makeImage = function(a, b) {
Expand Down

0 comments on commit 8c56776

Please sign in to comment.