Какво знаеш за обработката на изображения в браузъра…

Обработка на изображения в браузъра е възможна чрез използването на следните API:

Canvas API: Позволява програмен рисуване на графика (включително изображения). Можете да заредите изображение на платното, да манипулирате пикселите (да променяте цвета, да прилагате филтри) и да запазите резултата.

// Получаване на 2D контекста на платното
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Създаване и зареждане на изображение
const img = new Image();
img.onload = function() {
  // Рисуване на изображението върху платното
  ctx.drawImage(img, 0, 0);

  // Пример: Получаване на данни за пикселите
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data; // Масив с RGBA стойности

  // Тук можете да манипулирате пикселите (например, инвертиране на цветовете)
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];      // Червено
    pixels[i + 1] = 255 - pixels[i + 1]; // Зелено
    pixels[i + 2] = 255 - pixels[i + 2]; // Синьо
    // pixels[i + 3] - Алфа канал, не го променяме
  }

  // Актуализиране на данните за пикселите върху платното
  ctx.putImageData(imageData, 0, 0);

  // Пример: Запазване на платното като изображение във формат Base64
  const dataUrl = canvas.toDataURL('image/png');
  console.log(dataUrl); // Base64 представяне на PNG
};
img.src = 'path/to/image.jpg';

WebGL API: Ниско ниво API за рисуване на 2D и 3D графики с използване на GPU. Позволява изпълнение на високоефективна обработка на изображения (филтри, ефекти) с помощта на шейдъри.

// Пример за инициализация на WebGL контекст
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

if (!gl) {
  console.error('WebGL не се поддържа');
}

// Тук трябва да има код за зареждане на текстура от изображение,
// определяне на върхови и фрагментни шейдъри,
// рисуване на геометрия с прилагане на текстура и шейдъри.
// Това е значително по-сложно в сравнение с Canvas API.

CSS филтри: Позволяват прилагане на графични ефекти (замъгляване, яркост, контраст, сиви тонове и др.) към HTML елементи, включително изображения, чрез CSS.
```
/* Прилагане на ефект на замъгляване към изображение */
img {
  filter: blur(5px);
}

/* Прилагане на ефект на сиви тонове */
.grayscale {
  filter: grayscale(100%);
}
```
SVG (Мащабируема векторна графика): Векторен формат, който може да съдържа вградени растерни изображения. SVG разполага със собствен набор от филтри и ефекти, които могат да бъдат приложени към съдържанието, включително вградени изображения.
```
<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>
```
API за заснемане на изображения: Позволява получаване на изображения от камерата на устройството. Макар че това не е директна обработка, получените изображения могат да бъдат обработени по-късно с други API (Canvas).
Специализирани библиотеки: Съществуват JavaScript библиотеки (например Fabric.js, Konva.js, PixiJS), които улесняват работата с Canvas и WebGL, предоставяйки по-високи нива на абстракция и функционалност за обработка на изображения (изрязване, мащабиране, добавяне на текст, филтри).

Изборът на метод зависи от задачата: за базова обработка, като промяна на размера или прилагане на прости филтри, API Canvas е достатъчно и по-лесен за използване. За по-сложни и високоефективни ефекти, особено в реално време, WebGL е предпочитаният. CSS филтрите и SVG предлагат декларативен подход към прилагането на ефекти.

Какво знаеш за обработката на изображения в браузъра?