Ko jūs zināt par attēlu apstrādi pārlūkprogrammā…

Attēlu apstrāde pārlūkprogrammā ir iespējama ar šādiem API:

Canvas API: ļauj programmatiski zīmēt grafiku (ieskaitot attēlus). Jūs varat ielādēt attēlu uz audekla, manipulēt ar pikseļiem (mainīt krāsu, piemērot filtrus) un saglabāt rezultātu.

// Saņemt 2D audekla kontekstu
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Izveidot attēlu un ielādēt to
const img = new Image();
img.onload = function() {
  // Uzzīmēt attēlu uz audekla
  ctx.drawImage(img, 0, 0);

  // Piemērs: iegūt pikseļu datus
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data; // RGBA vērtību masīvs

  // Šeit var manipulēt ar pikseļiem (piemēram, invertēt krāsas)
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];      // Sarkanā
    pixels[i + 1] = 255 - pixels[i + 1]; // Zaļā
    pixels[i + 2] = 255 - pixels[i + 2]; // Zilā
    // pixels[i + 3] - Alfa kanāls, nemainām
  }

  // Atjaunot pikseļu datus uz audekla
  ctx.putImageData(imageData, 0, 0);

  // Piemērs: saglabāt audeklu kā PNG attēlu Base64 formātā
  const dataUrl = canvas.toDataURL('image/png');
  console.log(dataUrl); // PNG Base64 attēlojums
};
img.src = 'path/to/image.jpg';

WebGL API: zema līmeņa API 2D un 3D grafikas zīmēšanai, izmantojot GPU. Ļauj veikt augstas veiktspējas attēlu apstrādi (filtri, efekti) ar šaderiem.

// WebGL konteksta inicializācija
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (!gl) {
  console.error('WebGL nav atbalstīts');
}

// Šeit būtu kods tekstūras ielādei no attēla, virsotņu un fragmentu šaderu definēšanai,
// ģeometrijas zīmēšanai ar tekstūru un šaderu pielietojumu.

CSS filtri: ļauj piemērot grafiskus efektus (izplūdumu, spilgtumu, kontrastu, pelēko toni utt.) HTML elementiem, ieskaitot attēlus, izmantojot CSS.

/* Pielietot izplūduma efektu attēlam */
img {
  filter: blur(5px);
}

/* Pielietot pelēko toni efektu */
.grayscale {
  filter: grayscale(100%);
}

SVG (Scalable Vector Graphics): vektoru formāts, kas var saturēt iebūvētas rastrovās bildes. SVG ir savs filtru un efektu kopums, kas var tikt piemērots saturam, ieskaitot iebūvētas bildes.

<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: ļauj iegūt attēlus no ierīces kameras. Lai gan tas nav tiešs apstrādes process, iegūtie attēli var tikt vēlāk apstrādāti ar citiem API (piemēram, Canvas).
Specializētas bibliotēkas: ir JavaScript bibliotēkas (piemēram, Fabric.js, Konva.js, PixiJS), kas atvieglo darbu ar Canvas un WebGL, nodrošinot augstākā līmeņa abstrakcijas un funkcionalitāti attēlu apstrādei (griešana, mērogošana, teksta pievienošana, filtri).

Izvēle ir atkarīga no uzdevuma: pamata apstrādei, piemēram, izmēra maiņai vai vienkāršu filtru piemērošanai, parasti pietiek ar Canvas API, un tas ir vieglāk lietojams. Sarežģītāki un jaudīgāki efekti, īpaši reāllaikā, ir WebGL. CSS filtri un SVG piedāvā deklaratīvu pieeju efektu piemērošanai.

Klienta pusē attēlu apstrādei ir ierobežojumi, kas saistīti ar lietotāja ierīces veiktspēju un apstrādājamo attēlu lielumu. Smagiem uzdevumiem labāk ir izmantot servera puses apstrādi.

Ko jūs zināt par attēlu apstrādi pārlūkprogrammā?