in source/webapp/src/lib/js/imagePreview.js [820:915]
toggleTrack(trackId, onOff) {
const canvas = $(`#${ImagePreview.Constants.Id.CavnasList}`).find(`[data-track="${trackId}"]`).first();
if (!onOff) {
canvas.addClass('collapse');
return;
}
const init = !(canvas.data('init') === false);
if (init) {
canvas.removeClass('collapse');
return;
}
const canvasW = canvas.width();
const canvasH = canvas.height();
/* note: need to explicitly set the canvas width and height */
canvas[0].width = canvasW;
canvas[0].height = canvasH;
const ctx = canvas[0].getContext('2d');
const coord = canvas.data('coord').split(',').map(x =>
Number.parseFloat(x));
const w = Math.floor(coord[0] * canvasW);
const h = Math.floor(coord[1] * canvasH);
let x = Math.floor(coord[2] * canvasW);
let y = Math.floor(coord[3] * canvasH);
const hasCoord = (w || h || x || y);
if (hasCoord) {
ctx.strokeStyle = '#ffffff'; // #ff9900
ctx.moveTo(0, 0);
ctx.strokeRect(x, y, w, h);
}
const name = canvas.data('name');
const confidence = Number.parseFloat(canvas.data('confidence')).toFixed(2);
const gender = canvas.data('gender');
const ageRange = canvas.data('age-range');
const parentName = canvas.data('parent-name');
const text = [
`${name} (${confidence})`,
gender && `Gender: ${gender}`,
ageRange && `Age: ${ageRange}`,
parentName && `(${parentName})`,
].filter(x0 => x0);
let fontSize;
const lineSpace = 0;
if (hasCoord) {
fontSize = 12;
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
} else {
x = 0.5 * canvasW;
y = 0.5 * canvasH;
fontSize = 18;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
}
ctx.font = `${fontSize}px sans-serif`;
switch (canvas.data('type')) {
case 'moderation':
case 'celeb':
ctx.fillStyle = '#ffffff';
break;
case 'faceMatch':
ctx.fillStyle = '#ffffff';
break;
case 'face':
ctx.fillStyle = '#ffffff';
break;
case 'label':
ctx.fillStyle = '#ffffff';
break;
case 'text':
ctx.fillStyle = '#ffffff';
break;
default:
ctx.fillStyle = '#ffffff';
break;
}
let y0 = Math.max((y - (text.length * (fontSize + lineSpace))), 2);
while (text.length) {
ctx.fillText(text.shift(), x, y0);
y0 += (fontSize + lineSpace);
}
canvas.data('init', 'true');
canvas.removeClass('collapse');
}