Nicolas Gry - extrahttps://grybouilli.github.io/2026-09-07T00:00:00+02:00PhD Student in Computer Science · Inria de LyonImage Viewer2026-09-07T00:00:00+02:002026-09-07T00:00:00+02:00Nicolas Grytag:grybouilli.github.io,2026-09-07:/extra/
<div id="container">
<div id="left">
<div id="controls">
Width:
<input id="width" type="number" value="47" min="1">
Height:
<input id="height" type="number" value="32" min="1">
<label>
<input id="rgbMode" type="checkbox" checked>
RGB
</label>
</div>
<textarea id="data">
(255,0,0)(255,125,0)(255,255,0)(30,220,30)(0,70,200)(160,60,220)
</textarea>
</div>
<div id="right">
<canvas id="canvas"></canvas>
</div>
</div>
<script>
const textarea = document.getElementById("data");
const widthBox = document.getElementById("width");
const heightBox = document.getElementById("height");
const rgbMode = document.getElementById("rgbMode");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext …</script>
<div id="container">
<div id="left">
<div id="controls">
Width:
<input id="width" type="number" value="47" min="1">
Height:
<input id="height" type="number" value="32" min="1">
<label>
<input id="rgbMode" type="checkbox" checked>
RGB
</label>
</div>
<textarea id="data">
(255,0,0)(255,125,0)(255,255,0)(30,220,30)(0,70,200)(160,60,220)
</textarea>
</div>
<div id="right">
<canvas id="canvas"></canvas>
</div>
</div>
<script>
const textarea = document.getElementById("data");
const widthBox = document.getElementById("width");
const heightBox = document.getElementById("height");
const rgbMode = document.getElementById("rgbMode");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
function clamp(v) {
return Math.max(0, Math.min(255, v | 0));
}
function render() {
const w = parseInt(widthBox.value);
const h = parseInt(heightBox.value);
if (!w || !h)
return;
let nums;
if (rgbMode.checked) {
// Matches "(r,g,b)", "(r, g, b)", etc.
nums = [];
const regex = /\(\s*(-?\d+)\s*,\s*(-?\d+)\s*,\s*(-?\d+)\s*\)/g;
let m;
while ((m = regex.exec(textarea.value)) !== null) {
nums.push(
clamp(Number(m[1])),
clamp(Number(m[2])),
clamp(Number(m[3]))
);
}
}
else {
nums = textarea.value
.trim()
.split(/\s+/)
.filter(Boolean)
.map(Number);
}
canvas.width = w;
canvas.height = h;
const img = ctx.createImageData(w, h);
if (rgbMode.checked) {
const pixels = Math.min(w * h, Math.floor(nums.length / 3));
for (let i = 0; i < pixels; i++) {
img.data[4 * i + 0] = clamp(nums[3 * i + 0]);
img.data[4 * i + 1] = clamp(nums[3 * i + 1]);
img.data[4 * i + 2] = clamp(nums[3 * i + 2]);
img.data[4 * i + 3] = 255;
}
}
else {
const pixels = Math.min(w * h, nums.length);
for (let i = 0; i < pixels; i++) {
const v = clamp(nums[i]);
img.data[4 * i + 0] = v;
img.data[4 * i + 1] = v;
img.data[4 * i + 2] = v;
img.data[4 * i + 3] = 255;
}
}
ctx.putImageData(img, 0, 0);
const scale = Math.max(
1,
Math.floor(
Math.min(
(window.innerWidth * 0.55) / w,
(window.innerHeight * 0.9) / h
)
)
);
canvas.style.width = (w * scale) + "px";
canvas.style.height = (h * scale) + "px";
}
textarea.addEventListener("input", render);
widthBox.addEventListener("input", render);
heightBox.addEventListener("input", render);
rgbMode.addEventListener("change", render);
window.addEventListener("resize", render);
render();
</script>
Image ↔ XLSX Converter2026-09-07T00:00:00+02:002026-09-07T00:00:00+02:00Nicolas Grytag:grybouilli.github.io,2026-09-07:/extra/
<div class="container">
<h1>Image ↔ XLSX Converter</h1>
<!-- Conversion mode -->
<div class="mode">
<label>
<input type="radio" name="mode" value="toxlsx" checked>
From image to XLSX
</label>
<label>
<input type="radio" name="mode" value="toimage">
From XLSX to image
</label>
</div>
<!-- Input -->
<div class="file-row">
<input type="text" id="inputPath" placeholder="Input file..." readonly>
<label class="file-button">
Browse...
<input type="file" id="inputFile">
</label>
</div>
<!-- Output -->
<div class="file-row">
<input type="text" id="outputPath" placeholder="Output file (optional)">
<button id="outputButton">
Choose output...
</button>
</div>
<!-- Image output format -->
<div class="format-row" id="imageFormatRow">
<label for="imageFormat">
Image format:
</label>
<select id="imageFormat">
<option value="png">PNG</option>
<option value="jpeg">JPEG</option>
</select>
</div>
<!-- Drop zone -->
<div class="drop-zone" id="dropZone">
Drop an image or XLSX file here
</div>
<!-- Execute -->
<button class="execute" id="execute">
Execute
</button>
<!-- Status -->
<div class="status" id="status"></div>
<!-- Preview -->
<div class="preview" id="preview">
<h2>Preview</h2>
<img id="previewImage" alt="Image preview">
</div>
</div>
<script>
const inputFile = document.getElementById("inputFile");
const inputPath = document.getElementById("inputPath");
const outputPath = document.getElementById("outputPath");
const outputButton = document.getElementById("outputButton");
const executeButton = document …</script>
<div class="container">
<h1>Image ↔ XLSX Converter</h1>
<!-- Conversion mode -->
<div class="mode">
<label>
<input type="radio" name="mode" value="toxlsx" checked>
From image to XLSX
</label>
<label>
<input type="radio" name="mode" value="toimage">
From XLSX to image
</label>
</div>
<!-- Input -->
<div class="file-row">
<input type="text" id="inputPath" placeholder="Input file..." readonly>
<label class="file-button">
Browse...
<input type="file" id="inputFile">
</label>
</div>
<!-- Output -->
<div class="file-row">
<input type="text" id="outputPath" placeholder="Output file (optional)">
<button id="outputButton">
Choose output...
</button>
</div>
<!-- Image output format -->
<div class="format-row" id="imageFormatRow">
<label for="imageFormat">
Image format:
</label>
<select id="imageFormat">
<option value="png">PNG</option>
<option value="jpeg">JPEG</option>
</select>
</div>
<!-- Drop zone -->
<div class="drop-zone" id="dropZone">
Drop an image or XLSX file here
</div>
<!-- Execute -->
<button class="execute" id="execute">
Execute
</button>
<!-- Status -->
<div class="status" id="status"></div>
<!-- Preview -->
<div class="preview" id="preview">
<h2>Preview</h2>
<img id="previewImage" alt="Image preview">
</div>
</div>
<script>
const inputFile = document.getElementById("inputFile");
const inputPath = document.getElementById("inputPath");
const outputPath = document.getElementById("outputPath");
const outputButton = document.getElementById("outputButton");
const executeButton = document.getElementById("execute");
const dropZone = document.getElementById("dropZone");
const imageFormatRow = document.getElementById("imageFormatRow");
const imageFormat = document.getElementById("imageFormat");
const status = document.getElementById("status");
const preview = document.getElementById("preview");
const previewImage = document.getElementById("previewImage");
let selectedFile = null;
/* -------------------------------------------------
* Utilities
* ------------------------------------------------- */
function getMode() {
return document.querySelector(
'input[name="mode"]:checked'
).value;
}
function getExtension(filename) {
const parts = filename.split(".");
if (parts.length < 2) {
return "";
}
return parts[parts.length - 1].toLowerCase();
}
function getBaseName(filename) {
const lastDot = filename.lastIndexOf(".");
if (lastDot === -1) {
return filename;
}
return filename.substring(0, lastDot);
}
function setStatus(message, type) {
status.textContent = message;
status.className = "status " + type;
}
function clearStatus() {
status.textContent = "";
status.className = "status";
}
/* -------------------------------------------------
* Mode switching
* ------------------------------------------------- */
document.querySelectorAll(
'input[name="mode"]'
).forEach(radio => {
radio.addEventListener("change", () => {
const mode = getMode();
imageFormatRow.style.display =
mode === "toimage" ? "flex" : "none";
updateDefaultOutput();
});
});
/* -------------------------------------------------
* Input file
* ------------------------------------------------- */
inputFile.addEventListener("change", () => {
if (!inputFile.files.length) {
return;
}
setInputFile(inputFile.files[0]);
});
function setInputFile(file) {
selectedFile = file;
inputPath.value = file.name;
updateDefaultOutput();
clearStatus();
/*
* Preview image input.
*/
if (getMode() === "toxlsx") {
const extension = getExtension(file.name);
if (
extension === "png" ||
extension === "jpg" ||
extension === "jpeg"
) {
const url = URL.createObjectURL(file);
previewImage.src = url;
preview.style.display = "block";
}
}
}
/* -------------------------------------------------
* Default output name
* ------------------------------------------------- */
function updateDefaultOutput() {
if (!selectedFile) {
return;
}
const mode = getMode();
const base = getBaseName(selectedFile.name);
if (mode === "toxlsx") {
outputPath.value = base + ".xlsx";
}
else {
const format = imageFormat.value;
outputPath.value = base + "." + format;
}
}
imageFormat.addEventListener(
"change",
updateDefaultOutput
);
/* -------------------------------------------------
* Output file picker
*
* Browsers cannot normally choose an arbitrary
* output filename using a standard file dialog.
*
* We therefore use the browser download mechanism.
* The text field still allows the desired filename.
* ------------------------------------------------- */
outputButton.addEventListener("click", () => {
outputPath.focus();
outputPath.select();
});
/* -------------------------------------------------
* Drag & drop
* ------------------------------------------------- */
dropZone.addEventListener("dragover", event => {
event.preventDefault();
dropZone.classList.add("dragover");
});
dropZone.addEventListener("dragleave", () => {
dropZone.classList.remove("dragover");
});
dropZone.addEventListener("drop", event => {
event.preventDefault();
dropZone.classList.remove("dragover");
const files = event.dataTransfer.files;
if (!files.length) {
return;
}
setInputFile(files[0]);
});
/* -------------------------------------------------
* Image -> XLSX
* ------------------------------------------------- */
async function imageToXlsx(file, filename) {
const bitmap = await createImageBitmap(file);
const canvas = document.createElement("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
const ctx = canvas.getContext("2d", {
willReadFrequently: true
});
ctx.drawImage(bitmap, 0, 0);
const imageData = ctx.getImageData(
0,
0,
bitmap.width,
bitmap.height
);
const pixels = imageData.data;
const workbook = XLSX.utils.book_new();
const channels = {
red: [],
green: [],
blue: []
};
/*
* Construct one row per image row.
*
* pixels layout:
*
* R G B A R G B A ...
*/
for (let y = 0; y < bitmap.height; y++) {
const redRow = [];
const greenRow = [];
const blueRow = [];
for (let x = 0; x < bitmap.width; x++) {
const index =
(y * bitmap.width + x) * 4;
redRow.push(pixels[index]);
greenRow.push(pixels[index + 1]);
blueRow.push(pixels[index + 2]);
}
channels.red.push(redRow);
channels.green.push(greenRow);
channels.blue.push(blueRow);
}
/*
* Create the three worksheets.
*/
for (const [name, data] of Object.entries(channels)) {
const worksheet =
XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(
workbook,
worksheet,
name
);
}
/*
* Download XLSX.
*/
XLSX.writeFile(
workbook,
filename || "image.xlsx"
);
}
/* -------------------------------------------------
* XLSX -> Image
* ------------------------------------------------- */
async function xlsxToImage(file, filename) {
const arrayBuffer = await file.arrayBuffer();
const workbook = XLSX.read(
arrayBuffer,
{
type: "array"
}
);
const requiredSheets = [
"red",
"green",
"blue"
];
/*
* Check sheets.
*/
for (const sheet of requiredSheets) {
if (!workbook.SheetNames.includes(sheet)) {
throw new Error(
`Missing worksheet "${sheet}"`
);
}
}
/*
* Convert worksheets into arrays.
*/
const channels = {};
for (const sheetName of requiredSheets) {
const worksheet =
workbook.Sheets[sheetName];
channels[sheetName] =
XLSX.utils.sheet_to_json(
worksheet,
{
header: 1,
defval: 0,
raw: true
}
);
}
const red = channels.red;
const green = channels.green;
const blue = channels.blue;
/*
* Determine image dimensions.
*/
const height = red.length;
if (height === 0) {
throw new Error(
"The red worksheet is empty."
);
}
const width = red[0].length;
if (width === 0) {
throw new Error(
"The red worksheet is empty."
);
}
/*
* Check dimensions.
*/
if (
green.length !== height ||
blue.length !== height
) {
throw new Error(
"Channel sheets have different dimensions."
);
}
for (let y = 0; y < height; y++) {
if (
green[y].length !== width ||
blue[y].length !== width
) {
throw new Error(
"Channel sheets have different dimensions."
);
}
}
/*
* Build RGBA pixel buffer.
*/
const pixels =
new Uint8ClampedArray(
width * height * 4
);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const index =
(y * width + x) * 4;
pixels[index] =
clampByte(red[y][x]);
pixels[index + 1] =
clampByte(green[y][x]);
pixels[index + 2] =
clampByte(blue[y][x]);
pixels[index + 3] = 255;
}
}
/*
* Put pixels into Canvas.
*/
const canvas =
document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx =
canvas.getContext("2d");
const imageData =
new ImageData(
pixels,
width,
height
);
ctx.putImageData(
imageData,
0,
0
);
/*
* Show preview.
*/
const mime =
imageFormat.value === "jpeg"
? "image/jpeg"
: "image/png";
const quality =
imageFormat.value === "jpeg"
? 0.95
: undefined;
const dataUrl =
canvas.toDataURL(
mime,
quality
);
previewImage.src = dataUrl;
preview.style.display = "block";
/*
* Download.
*/
const extension =
imageFormat.value;
const finalFilename =
filename ||
`image.${extension}`;
downloadDataUrl(
dataUrl,
finalFilename
);
}
function clampByte(value) {
value = Number(value);
if (!Number.isFinite(value)) {
return 0;
}
return Math.max(
0,
Math.min(
255,
Math.round(value)
)
);
}
/* -------------------------------------------------
* Download helper
* ------------------------------------------------- */
function downloadDataUrl(dataUrl, filename) {
const link =
document.createElement("a");
link.href = dataUrl;
link.download = filename;
document.body.appendChild(link);
link.click();
link.remove();
}
/* -------------------------------------------------
* Execute
* ------------------------------------------------- */
executeButton.addEventListener(
"click",
async () => {
clearStatus();
try {
if (!selectedFile) {
throw new Error(
"No input file selected."
);
}
const mode = getMode();
let output = outputPath.value.trim();
if (!output) {
const base =
getBaseName(
selectedFile.name
);
if (mode === "toxlsx") {
output = base + ".xlsx";
}
else {
output =
base +
"." +
imageFormat.value;
}
}
/*
* Validate image -> XLSX.
*/
if (mode === "toxlsx") {
const extension =
getExtension(
selectedFile.name
);
if (
![
"jpg",
"jpeg",
"png"
].includes(extension)
) {
throw new Error(
"Unsupported image format. " +
"Supported formats are: jpg, jpeg, png"
);
}
if (
getExtension(output) !==
"xlsx"
) {
throw new Error(
"Output path is not a spreadsheet."
);
}
setStatus(
"Converting image to XLSX...",
"processing"
);
await imageToXlsx(
selectedFile,
output
);
}
/*
* Validate XLSX -> image.
*/
else {
if (
getExtension(
selectedFile.name
) !== "xlsx"
) {
throw new Error(
"Input file is not a spreadsheet."
);
}
const outputExtension =
getExtension(output);
if (
![
"png",
"jpg",
"jpeg"
].includes(outputExtension)
) {
throw new Error(
"Output must be an image."
);
}
setStatus(
"Converting XLSX to image...",
"processing"
);
await xlsxToImage(
selectedFile,
output
);
}
setStatus(
`Saved "${output}"`,
"success"
);
}
catch (error) {
console.error(error);
setStatus(
error.message,
"error"
);
}
}
);
/* -------------------------------------------------
* Initial state
* ------------------------------------------------- */
imageFormatRow.style.display = "none";
</script>