Mit tud az képfeldolgozásról a böngészőben?

A böngészőben történő képkezelés a következő API-k segítségével lehetséges:

• Canvas API: Lehetővé teszi grafika (beleértve képek) programozott rajzolását. Betölthetsz képet a vászonra, manipulálhatod a pixeleket (szín módosítása, szűrők alkalmazása), és elmentheted az eredményt.

  // A vászon 2D kontextusának megszerzése
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Kép létrehozása és betöltése
  const img = new Image();
  img.onload = function() {
    // A kép rajzolása a vászonra
    ctx.drawImage(img, 0, 0);
  
    // Példa: Pixelek adatainak lekérése
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data; // RGBA értékek tömbje
  
    // Itt manipulálhatod a pixeleket (pl. színek invertálása)
    for (let i = 0; i < pixels.length; i += 4) {
      pixels[i] = 255 - pixels[i];      // Piros
      pixels[i + 1] = 255 - pixels[i + 1]; // Zöld
      pixels[i + 2] = 255 - pixels[i + 2]; // Kék
      // pixels[i + 3] - Alfa csatorna, nem változtatjuk
    }
  
    // A pixelek adatainak frissítése a vásznon
    ctx.putImageData(imageData, 0, 0);
  
    // Példa: A vászon mentése Base64 formátumban
    const dataUrl = canvas.toDataURL('image/png');
    console.log(dataUrl); // PNG Base64 reprezentáció
  };
  img.src = 'path/to/image.jpg';
  

• WebGL API: Alacsony szintű API 2D és 3D grafika rajzolásához GPU használatával. Lehetővé teszi nagy teljesítményű képfeldolgozást (szűrők, effektek) shader-ek segítségével.

  // WebGL kontextus inicializálása például
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  if (!gl) {
    console.error('A WebGL nem támogatott');
  }
  
  // Itt a kép textúrájának betöltése, csúcs- és fragment shader-ek definiálása,
  // geometria rajzolása textúrával és shader-ekkel.
  // Ez sokkal összetettebb folyamat, mint a Canvas API.
  

• CSS szűrők: Lehetővé teszik grafikus effektusok (elmosódás, fényerő, kontraszt, szürkeárnyalatok stb.) alkalmazását HTML elemekre, beleértve a képeket is, CSS segítségével.

  /* Elmosódási effektus alkalmazása a képre */
  img {
    filter: blur(5px);
  }
  
  /* Szürkeárnyalat effektus alkalmazása */
  .grayscale {
    filter: grayscale(100%);
  }
  

• SVG (Skalálható Vektoros Grafika): Olyan vektorméret, amely tartalmazhat beágyazott raszterképeket. Az SVG saját szűrő- és effektkészlettel rendelkezik, amelyek alkalmazhatók a tartalomra, beleértve a beágyazott képeket is.

  <svg width="400" height="300">
    <filter id="feGaussianBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  
    <image xlink:href="path/to/image.jpg" width="400" height="300" filter="url(#feGaussianBlur)" />
  </svg>
  

• Kép rögzítési API: Lehetővé teszi a készülék kamerájáról származó képek megszerzését. Bár ez nem közvetlen feldolgozás, a szerzett képek később más API-kkal (Canvas) feldolgozhatók.

• Speciális könyvtárak: JavaScript könyvtárak (pl. Fabric.js, Konva.js, PixiJS) léteznek, amelyek egyszerűsítik a Canvas és WebGL használatát, magasabb szintű absztrakciókat és funkciókat kínálva a képkezeléshez (vágás, méretezés, szöveg hozzáadása, szűrők).

A módszer kiválasztása a feladattól függ: az alapvető feldolgozáshoz, például méretezéshez vagy egyszerű szűrők alkalmazásához, a Canvas API általában elegendő és könnyen használható. Bonyolultabb és nagyobb teljesítményt igénylő effektekhez, különösen valós idejű feldolgozáshoz, a WebGL a preferált. A CSS szűrők és SVG deklaratív megközelítést kínálnak az effektek alkalmazásához.