From b56b81b2bac8dc50b4de9bfb352b79e05af00294 Mon Sep 17 00:00:00 2001 From: Do Siki Date: Sun, 23 Aug 2026 11:46:29 +0200 Subject: [PATCH] feat(cms): make-transparent (remove white background) in the logo editor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a ⚪ Háttér átlátszóvá (fehér) button to the canvas editor. Pixels above a luminance threshold become fully transparent; a soft ramp just below keeps edges smooth. Lets white-background partner/site logos sit on any page background. Closes MITHOME-84 --- scripts/cms-logo-client.js | 30 ++++++++++++++++++++++++++++++ scripts/cms-logo-page.js | 1 + 2 files changed, 31 insertions(+) diff --git a/scripts/cms-logo-client.js b/scripts/cms-logo-client.js index 8ed217b..da6674e 100644 --- a/scripts/cms-logo-client.js +++ b/scripts/cms-logo-client.js @@ -146,6 +146,36 @@ function toggleInvert() { render(); } +// WHY: many partner/site logos arrive with a solid (usually white) background. +// Removing it lets the logo sit cleanly on any page background. Pixels brighter +// than the threshold become transparent; a soft ramp just below it keeps the +// edges smooth instead of jagged. +function makeTransparent() { + if (!editImg.width) return; + const off = document.createElement('canvas'); + off.width = editImg.width; + off.height = editImg.height; + const octx = off.getContext('2d'); + octx.drawImage(editImg, 0, 0); + const imgData = octx.getImageData(0, 0, off.width, off.height); + const d = imgData.data; + const thresh = 235; // fully transparent above this luminance + const soft = 30; // smooth ramp below the threshold + for (let i = 0; i < d.length; i += 4) { + const lum = (d[i] + d[i + 1] + d[i + 2]) / 3; + if (lum > thresh) { + d[i + 3] = 0; + } else if (lum > thresh - soft) { + const t = (lum - (thresh - soft)) / soft; // 0..1 + d[i + 3] = Math.round(d[i + 3] * (1 - t)); + } + } + octx.putImageData(imgData, 0, 0); + const next = new Image(); + next.onload = () => { editImg = next; render(); }; + next.src = off.toDataURL('image/png'); +} + function resetFilters() { editState.brightness = 100; editState.contrast = 100; editState.invert = false; editState.padding = 0; document.getElementById('bright-range').value = 100; document.getElementById('bright-val').textContent = '100%'; diff --git a/scripts/cms-logo-page.js b/scripts/cms-logo-page.js index 6f59e73..462ac00 100644 --- a/scripts/cms-logo-page.js +++ b/scripts/cms-logo-page.js @@ -181,6 +181,7 @@ const LOGO_PAGE = (csrfToken) => `
+