WebR demo

---

---

# VegetationCoverAuto simplificada para webR
VegetationCoverAuto <- function(img_path) {
  library(imager)
  image <- load.image(img_path)
  
  # Ajustar tamaño
  ancho_deseado <- 512
  proporcion <- dim(image)[2] / dim(image)[1]
  nuevo_alto <- round(ancho_deseado * proporcion)
  image <- resize(image, ancho_deseado, nuevo_alto)
  
  # Calcular ExG
  R <- R(image)
  G <- G(image)
  B <- B(image)
  exg <- 2 * G - R - B
  
  # Normalizar y binarizar (umbral automático)
  res_norm <- (exg - min(exg, na.rm = TRUE)) / (max(exg, na.rm = TRUE) - min(exg, na.rm = TRUE))
  umbral <- mean(res_norm)
  binaria <- as.cimg(res_norm > umbral)
  
  # Cobertura vegetal (% pixeles positivos)
  cobertura <- 100 * mean(as.vector(binaria))
  
  # Guardar la imagen binaria como archivo temporal PNG
  save.image(binaria, "binaria.png")
  
  return(list(imagen = "binaria.png", cobertura = cobertura, umbral = umbral))
}

<input type="file" id="imageInput" accept="image/*"/>
<div id="output"></div>

<script type="module">
  import { WebR } from "https://webr.r-wasm.org/latest/webr.mjs";
  const webr = new WebR();
  await webr.init();

  document.getElementById("imageInput").addEventListener("change", async (event) => {
    const file = event.target.files[0];
    if (!file) return;
    
    // Leer imagen como ArrayBuffer y pasarlo a webR
    const arrayBuffer = await file.arrayBuffer();
    const uint8Array = new Uint8Array(arrayBuffer);
    await webr.FS.writeFile("/tmp/input.png", uint8Array);

    // Ejecutar la función en R
    const result = await webr.evalR("res <- VegetationCoverAuto('/tmp/input.png')");
    const cobertura = await webr.evalR("res$cobertura");
    const umbral = await webr.evalR("res$umbral");
    
    // Leer la imagen resultante como base64
    const binImage = await webr.FS.readFile("binaria.png");
    const binBase64 = btoa(String.fromCharCode(...binImage));
    
    // Mostrar la imagen binaria y resultados
    document.getElementById("output").innerHTML = `
      <p><strong>Cobertura vegetal estimada:</strong> ${Number(cobertura).toFixed(1)}%</p>
      <p><strong>Umbral:</strong> ${Number(umbral).toFixed(3)}</p>
      <img src="data:image/png;base64,${binBase64}" width="300">
    `;
  });
</script>