რა იცით ბრაუზერში სურათების დამუშავებაზე?

ბრაუზერში სურათების დამუშავება შესაძლებელია შემდეგი 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 მნიშვნელობების მასივი
  
    // აქ შეგიძლიათ manipulate პიქსელებს (მაგ. ფერების ინვერტირება)
    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-ს გამოყენებით. საშუალებას აძლევს მაღალი წარმადობის სურათების დამუშავება (ფილტრები, ეფექტები) შეიდერების საშუალებით.

  // WebGL კონტექსტის ინიციალიზაცია
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  
  if (!gl) {
    console.error('WebGL მხარდაჭერილი არაა');
  }
  
  // აქ უნდა იყოს კოდი სურათიდან ტექსტურის ჩატვირთვის, ვერტექსული და ფრაგმენტული შეიდერების განსაზღვრის, გეომეტრიის გამოსახატვის და შეიდერების გამოყენების.
  

• 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 სთავაზობენ დეკლარაციულ მიდგომას ეფექტების გამოყენებისთვის.

კლIENTის მხარის სურათების დამუშავებას აქვს შეზღუდვები, დაკავშირებული მომხმარებლის მოწყობილობის შესრულების უნარიანობასთან და დამუშავებული სურათების ზომასთან. მძიმე ოპერაციებისათვის უკეთესია სერვერული დამუშავება.