Brauzerdə şəkil emalı haqqında nə bilirsiniz?

Brauzerdə şəkil emalı aşağıdakı API-lər vasitəsilə mümkündür:

• Canvas API: Qrafikləri (o cümlədən şəkilləri) proqramlaşdırma yolu ilə çəkməyə imkan verir. Şəkli yükləyə, pikselləri manipulyasiya edə (rəng dəyişdir, filtrlər tətbiq et) və nəticəni yadda saxlaya bilərsən.

  // Canvas-ın 2D kontekstini əldə et
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // Şəkil yarad və yüklə
  const img = new Image();
  img.onload = function() {
    // Şəkili canvas-a çək
    ctx.drawImage(img, 0, 0);
  
    // Nümunə: Pikselləri əldə et
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const pixels = imageData.data; // RGBA dəyərləri array
  
    // Burada pikselləri manipulyasiya edə bilərsən (məsələn, rəngləri tərs çevir)
    for (let i = 0; i < pixels.length; i += 4) {
      pixels[i] = 255 - pixels[i];      // Qırmızı
      pixels[i + 1] = 255 - pixels[i + 1]; // Yaşıl
      pixels[i + 2] = 255 - pixels[i + 2]; // Mavi
      // pixels[i + 3] - Alfa kanalı, dəyişdirmə
    }
  
    // Pikselləri yenilə
    ctx.putImageData(imageData, 0, 0);
  
    // Nümunə: Canvas-ı Base64 şəkil kimi yadda saxla
    const dataUrl = canvas.toDataURL('image/png');
    console.log(dataUrl); // PNG Base64 nümayişi
  };
  img.src = 'path/to/image.jpg';
  

• WebGL API: GPU istifadə edərək 2D və 3D qrafiklərin çəkilməsi üçün aşağı səviyyəli API. Yüksək performanslı şəkil emalı (filtrlər, effektlər) üçün shaderlərdən istifadə etməyə imkan verir.

  // WebGL kontekstinin başlanğıcı
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  if (!gl) {
    console.error('WebGL dəstəklənmir');
  }
  
  // Burada şəkildən tekstura yükləmək, vertex və fragment shaderlərini təyin etmək,
  // geometrini çəkmək və shaderlərdən istifadə etmək üçün kod olmalıdır.
  // Bu, Canvas API-dən çox mürəkkəbdir.
  

• CSS Filter Effektləri: HTML elementlərinə (o cümlədən şəkillərə) bulanıqlaşdırma, parlaqlıq, kontrast, boz tonlar və s. kimi qrafik effektləri tətbiq etməyə imkan verir.

  /* Şəkilə bulanıq effekt tətbiq edir */
  img {
    filter: blur(5px);
  }
  
  /* Boz tonlar effekti tətbiq edir */
  .grayscale {
    filter: grayscale(100%);
  }
  

• SVG (Skalabl Vector Graphics): Vektor formatı olub, daxilində raster şəkillər yerləşdirilə bilər. SVG öz filtr və effektlər toplusuna malikdir və daxilindəki məzmun, o cümlədən yerləşdirilmiş şəkillər üzərində tətbiq oluna bilər.

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

• Şəkil Yığma API: Cihazın kamerasından şəkil almağa imkan verir. Bu, birbaşa emal olmasa da, əldə edilən şəkillər digər API-lər (Canvas) ilə işlənə bilər.

• Xüsusi kitabxanalar: JavaScript üçün (məsələn, Fabric.js, Konva.js, PixiJS) kitabxanalar mövcuddur ki, Canvas və WebGL ilə işləməyi sadələşdirir, daha yüksək səviyyəli abstraksiyalar və şəkil emalı funksionallığı təmin edir (kəsim, ölçü, mətn əlavə etmə, filtrlər).

İstifadə üsulu vəzifədən asılıdır: sadə emal üçün, məsələn, ölçünü dəyişdirmək və ya sadə filtrlər tətbiq etmək üçün Canvas API kifayət edir və istifadəsi asandır. Daha mürəkkəb və performans tələb edən effektlər üçün, xüsusən real vaxtda, WebGL üstünlük təşkil edir. CSS Filters və SVG isə effektlərin deklarativ tətbiqi üçün uyğundur.

İstifadəçinin cihazının performansı və emal edilən şəkillərin ölçüsü ilə bağlı məhdudiyyətlər mövcuddur. Resurs tələb edən əməliyyatlar üçün server tərəfi emal daha yaxşıdır.