CODIGO FUENTE CitriCIELab

CODIGO FUENTE CitriCIELab
<!DOCTYPE html>
<html>
<head>
<title>Predicci&oacuten de madurez de frutas c&iacutetricas en escala
de color CIELab</title>
<style>
canvas {
border: 1px solid black;
cursor: crosshair;
}
#pixelColor {
width: 50px;
height: 50px;
border: 1px solid black;
}
#colorBar {
width: 800px;
height: 40px;
}
</style>
</head>
<body>
<h1>Predicci&oacuten de madurez de frutas c&iacutetricas en escala de
color CIELab</h1>
<input type="file" id="fileInput" accept="image/*" />
<br />
<canvas id="canvas" ></canvas>
<div id="colorBar"></div>
<label for="fruitType">Tipo de fruta:</label>
<select id="fruitType">
<option value="Lima">Lima</option>
<option value="Limon">Limon</option>
<option value="Naranja">Naranja</option>
<option value="Mandarina">Mandarina</option>
<option value="Toronja">Toronja</option>
</select>
<br />
<p>Haga click en el pixel de la imagen cargada para obtener los

valores CIELab y predecir la madurez de los C&iacutetricos.</p>
<br />
<label for="lValue">Cielab Canal L:</label>
<input type="text" id="lValue" readonly />
<label for="aValue">a:</label>
<input type="text" id="aValue" readonly />
<label for="bValue">b:</label>
<input type="text" id="bValue" readonly />
<p>Color Pixel. </p>
<div id="pixelColor"></div>
<br />
<p id="maturityPrediction"></p>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const lValueInput = document.getElementById('lValue');
const aValueInput = document.getElementById('aValue');
const bValueInput = document.getElementById('bValue');
const pixelColorDiv = document.getElementById('pixelColor');
const fruitTypeSelect = document.getElementById('fruitType');
const colorBarDiv = document.getElementById('colorBar');
const maturityPredictionElement =
document.getElementById('maturityPrediction');
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', handleFileSelect, false);
function handleFileSelect(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
canvas.addEventListener('click', handleCanvasClick);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
}
function handleCanvasClick(event) {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const pixel = ctx.getImageData(x, y, 1, 1).data;
const rgb = [pixel[0], pixel[1], pixel[2]];
const lab = rgb2lab(rgb);
lValueInput.value = lab[0].toFixed(2);
aValueInput.value = lab[1].toFixed(2);
bValueInput.value = lab[2].toFixed(2);
const pixelColor = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
pixelColorDiv.style.backgroundColor = pixelColor;
updateColorBar(lab[1], lab[2], fruitTypeSelect.value);
predictMaturity(lab[0], lab[1], lab[2],
fruitTypeSelect.value);
}
// Función para convertir RGB a CIELab
function rgb2lab(rgb) {
let r = rgb[0] / 255,
g = rgb[1] / 255,
b = rgb[2] / 255,
x, y, z;
r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r /

12.92;
g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g /
12.92;
b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b /
12.92;
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;

y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
x = (x > 0.008856) ? Math.pow(x, 1/3) : (7.787 * x) + 16/116;

y = (y > 0.008856) ? Math.pow(y, 1/3) : (7.787 * y) + 16/116;
z = (z > 0.008856) ? Math.pow(z, 1/3) : (7.787 * z) + 16/116;
return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)]

}
// Función para predecir la madurez de la fruta basada en los

valores CIELab y el tipo de fruta
function predictMaturity(l, a, b, fruitType) {
if (fruitType === 'Lima') {

if (l < 93 && a < -11 && b > 42) {
maturityPredictionElement.textContent = "La Lima esta
sobre madura.";
} else if (l > 93 && a > -11 && b > 42) {
madura";
} else if (l < 58 && a < -26 && b < 43) {
en proceso de maduración.";
} else {
maturityPredictionElement.textContent = "La Lima no
esta madura.";
}
} else if (fruitType === 'Limon') {
if (l < 93 && a > -15 && b > 58) {
maturityPredictionElement.textContent = "El Limon
esta sobre maduro.";
} else if (l > 93 && a < -15 && b < 58) {
maturityPredictionElement.textContent = "El Limon
esta maduro.";
} else if (l < 67 && a > -24 && b < 54) {
maturityPredictionElement.textContent = "La Limon
esta en proceso de maduración.";
} else {
maturityPredictionElement.textContent = "El Limon no
esta maduro.";
}
} else if (fruitType === 'Naranja') {
if (l < 73 && a > 30 && b < 78){
maturityPredictionElement.textContent = "La naranja
esta sobre madura.";
} else if (l > 73 && a < 2 && b > 68) {
esta madura.";
} else if (l < 50 && a > -6 && b < 60) {
esta en proceso de maduracion.";
} else {
no esta madura.";
}
} else if (fruitType === 'Mandarina') {
if (l < 54 && a > 50 && b > 58) {
maturityPredictionElement.textContent = "La Mandarina
esta sobre madura.";
} else if ( l > 54 && a < 50 && b < 58) {
esta madura.";
} else if (l < 50 && a < -8 && b < 45) {
} else {
no esta madura.";
}
} else if (fruitType === 'Toronja') {
if (l < 70 && a > 24 && b < 60) {
maturityPredictionElement.textContent = "La Toronja
esta en sobre maduracion.";
} else if (l > 70 && a < 24 && b > 60) {
esta maduro.";
} else if (l < 55 && a < -4 && b < 55) {
} else {
esta no esta madura.";
}
}
}
// Función para actualizar la barra de color según los valores a

y b y el tipo de fruta
fruitTypeSelect.addEventListener('change', updateColorBar);
function updateColorBar() {
const fruitType = fruitTypeSelect.value;
let colorBarGradient;
if (fruitType === 'Lima') {
// Colores de maduración para Limas
colorBarGradient = `linear-gradient(90deg, lab(33, -19,
23), lab(85, -25, 70), lab(67, -3, 45))`;
} else if (fruitType === 'Limon') {
// Colores de maduración para Limones
37), lab(75, -30, 54), lab(82, -3, 61))`;
} else if (fruitType === 'Naranja') {
// Colores de maduración para naranjas
50), lab(80, -4, 81), lab(71, 33, 76))`;
} else if (fruitType === 'Mandarina') {
// Colores de maduración para Mandarinas
colorBarGradient = `linear-gradient(90deg, lab(35 -26,
35), lab(59, 7, 52), lab(52, 52, 60))`;
} else if (fruitType === 'Toronja') {
// Colores de maduración para Toronjas
50), lab(75, -2, 69), lab(69, 26, 63))`;
}
colorBarDiv.style.background = colorBarGradient;
}
</script>
</body>
</html>

CODIGO FUENTE CitriCIELab

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CODIGO FUENTE CitriCIELab

Uploaded by

Copyright:

Available Formats

CODIGO FUENTE CitriCIELab

<p>Haga click en el pixel de la imagen cargada para obtener los

const fileInput = document.getElementById('fileInput');

// Función para convertir RGB a CIELab

r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r /

x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;

x = (x > 0.008856) ? Math.pow(x, 1/3) : (7.787 * x) + 16/116;

return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)]

// Función para predecir la madurez de la fruta basada en los

if (fruitType === 'Lima') {

// Función para actualizar la barra de color según los valores a

You might also like