feat(cms): make-transparent (remove white background) in the logo editor

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
2026-08-23 11:46:29 +02:00
parent f6846ad217
commit b56b81b2ba
2 changed files with 31 additions and 0 deletions
@@ -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%';
@@ -181,6 +181,7 @@ const LOGO_PAGE = (csrfToken) => `<!DOCTYPE html>
          <div class="btn-row" style="margin-top:8px;">
            <button class="btn-tool" id="btn-invert" onclick="toggleInvert()">🌓 Invertálás</button>
            <button class="btn-tool" onclick="resetFilters()">↺ Alaphelyzet</button>
            <button class="btn-tool" onclick="makeTransparent()">⚪ Háttér átlátszóvá (fehér)</button>
          </div>
        </div>
      </div>