Čo vieš o spracovaní obrázkov v prehliadači?

Spracovanie obrázkov v prehliadači je možné pomocou nasledujúcich API:

• Canvas API: Umožňuje programovo kresliť grafiku (vrátane obrázkov). Môžete nahrať obrázok na plátno, manipulovať s pixelmi (meniť farbu, aplikovať filtre) a ukladať výsledok.

  // Získame kontext 2D plátna
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Vytvoríme obrázok a načítame ho
  const img = new Image();
  img.onload = function() {
    // Nakreslíme obrázok na plátno
    ctx.drawImage(img, 0, 0);
  
    // Príklad: Získavame dáta pixelov
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data; // Pole RGBA hodnôt
  
    // Tu môžeme manipulovať s pixelmi (napríklad invertovať farby)
    for (let i = 0; i < pixels.length; i += 4) {
      pixels[i] = 255 - pixels[i];      // Červená
      pixels[i + 1] = 255 - pixels[i + 1]; // Zelená
      pixels[i + 2] = 255 - pixels[i + 2]; // Modrá
      // pixels[i + 3] - Alfa kanál, nemeníme ho
    }
  
    // Aktualizujeme dáta pixelov na plátne
    ctx.putImageData(imageData, 0, 0);
  
    // Príklad: Uložíme plátno ako obrázok vo formáte Base64
    const dataUrl = canvas.toDataURL('image/png');
    console.log(dataUrl); // Base64 reprezentácia PNG
  };
  img.src = 'path/to/image.jpg';
  

• WebGL API: Nízkoúrovňové API na vykresľovanie 2D a 3D grafiky s využitím GPU. Umožňuje vykonávať vysoko výkonnú spracovanie obrázkov (filtre, efekty) pomocou shaderov.

  // Príklad inicializácie WebGL kontextu
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  if (!gl) {
    console.error('WebGL nie je podporované');
  }
  
  // Tu by nasledoval kód na načítanie textúry z obrázka,
  // definovanie vrstvových a fragmentových shaderov,
  // vykreslenie geometrie s použitím textúry a shaderov.
  // Toto je oveľa zložitejší proces v porovnaní s Canvas API.
  

• Filter Effects (CSS Filters): Umožňujú aplikovať grafické efekty (rozmazanie, jas, kontrast, odtiene šedej atď.) na HTML prvky, vrátane obrázkov, pomocou CSS.

  /* Aplikácia rozmazania na obrázok */
  img {
    filter: blur(5px);
  }
  
  /* Aplikácia odtieňov šedej */
  .grayscale {
    filter: grayscale(100%);
  }
  

• SVG (Scalable Vector Graphics): Vektorový formát, ktorý môže obsahovať vložené rastrové obrázky. SVG má vlastnú sadu filtrov a efektov, ktoré môžu byť aplikované na obsah vrátane vložených obrázkov.

  <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>
  

• Image Capture API: Umožňuje získavať obrázky z kamery zariadenia. Hoci to nie je priama spracovanie, získané obrázky môžu byť následne spracované pomocou iných API (Canvas).

• Špecializované knižnice: Existujú JavaScript knižnice (napríklad Fabric.js, Konva.js, PixiJS), ktoré zjednodušujú prácu s Canvas a WebGL, poskytujúc vyššie abstrakcie a funkcionalitu pre spracovanie obrázkov (orezanie, škálovanie, pridanie textu, filtre).

Výber metódy závisí od úlohy: pre základné spracovanie, ako je zmena veľkosti alebo použitie jednoduchých filtrov, je Canvas API zvyčajne dostatočné a jednoduchšie na použitie. Pre zložitejšie a výkonné efekty, najmä v reálnom čase, je WebGL preferované. CSS Filters a SVG ponúkajú deklaratívny prístup k aplikácii efektov.

Spracovanie obrázkov na strane klienta má obmedzenia, spojené s výkonom zariadenia používateľa a veľkosťou spracovávaných obrázkov. Pre náročné operácie je lepšie použiť serverové spracovanie.