Ինչ եք գիտակցում բրաուզերում պատկերների մշակման մասին?

Բրաուզերում պատկերների մշակումը հնարավոր է հետևյալ 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); // PNG Base64 ներկայացում
  };
  img.src = 'path/to/image.jpg';
  

• WebGL API: Նվազ մակարդակով API՝ 2D և 3D գրաֆիկայի համար, օգտագործելով GPU: Հնարավորություն է տալիս բարձր կատարողականությամբ պատկերների մշակման (ֆիլտրեր, էֆեկտներ) կատարել shaders-ների միջոցով:

  // WebGL կոնտեքստի ինիցիալիզացիա
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  if (!gl) {
    console.error('WebGL չի աջակցվում');
  }
  
  // Այստեղ պետք է լինի կոդ՝ պատկերից տեքստուրա բեռնելու, վերտեքսային և ֆրագմենտային shaders-ների սահմանման, գեոմետրիա նկարելու և shaders-ների կիրառմամբ:
  

• CSS ֆիլտրեր: Позволяют применять графические эффекты (размытие, яркость, контрастность, оттенки серого и т.д.) к HTML տարրերին, ներառյալ պատկերները, CSS-ի միջոցով:

  /* Ապլիկացիա՝ բլուրի ֆիլտր */
  img {
    filter: blur(5px);
  }
  
  /* Ապլիկացիա՝ սև-սպիտակ տոնայնություն */
  .grayscale {
    filter: grayscale(100%);
  }
  

• SVG (Scalable Vector Graphics): Վեկտորային ֆորմատ, որը կարող է պարունակել ներդրված ռաստր պատկերներ: 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>
  

• Image Capture API: Позволяет получать изображения с камеры устройства. Չնայած դա ուղիղ մշակման չէ, ստացված պատկերները կարող են հետագայում մշակվել այլ API-ների (օր.՝ Canvas) միջոցով:

• Մասնագիտացված գրադարաններ: Կան JavaScript գրադարաններ (օր.՝ Fabric.js, Konva.js, PixiJS), որոնք հեշտացնում են Canvas և WebGL-ի աշխատանքը՝ բարձր մակարդակի արմատական և ֆունկցիոնալությամբ:

Ընտրությունը կախված է խնդրից. բազային մշակման համար, ինչպիսիք են չափի փոփոխությունը կամ պարզ ֆիլտրերի կիրառումը, սովորաբար բավարար է Canvas API-ն և ավելի հեշտ է օգտագործել: Ավելի բարդ և բարձր կատարողական էֆեկտների համար, հատկապես իրական ժամանակում, WebGL-ը նախընտրելի է: CSS ֆիլտրերը և SVG-ն առաջարկում են դեկլարատիվ մոտեցում էֆեկտների կիրառմանը:

Կոնկրետ հաճախորդային կողմի պատկերների մշակումը ունի սահմանափակումներ՝ կապված օգտագործողի սարքի կատարողականության և մշակվող պատկերների չափի հետ: Ծանրաբեռնված գործողությունների համար ավելի լավ է օգտագործել սերվերային մշակումը։