l16 js

//tworzymy zmienne, dzięki którym uzyskamy dostęp do kluczowych elementów HTML w projekcie
//tworzymy je jako stałe bo nie będziemy im już przypisywać innych wartości
const choosenPicture = document.querySelector("#select-picture");
const canvas = document.querySelector("#meme");
const textTop = document.querySelector("#text-top");
const textBottom = document.querySelector("#text-bottom");
const downloadButton = document.querySelector('#download-button');
//zmienna globalna przechowująca nasz wybrany obrazek w formie URL
let picture;

//ukrywamy przycisk pobierz
downloadButton.style.display='none';

//Na przycisku, którym wybieramy obrazki ustawiamy tzw obserwator zdarzeń którego zadanie będzie monitorować każdą zmiane tego elementu
//dla nas ozacza to tyle że jak wybierzemy obrazek to kod dla zdarzenia zostanie wykonany
//parametr e(event) przekazuje informacje o danym zdarzeniu i elemencie
choosenPicture.addEventListener("change", function(e){

//tworzymy ciąg znaków (URL), który będzie repreznetować nasz obiekt obrazka i ułatwi to jego wykorzystanie w kodzie
//jako parametr metoda ta przyjmuje plik, wykorzystujemy parametr e aby zwrócić pierwszy obrazek, który wybraliśmy
const pictureUrl = URL.createObjectURL(e.target.files[0]);

//konstruktor ten tworzy nam nowy elelemnt html - <img>
picture = new Image();
//ustawiamy ścieżkę do obrazka
picture.src = pictureUrl;

//wczytywanie obrazka po wybraniu w canvasie
  picture.addEventListener("load",function(){
     console.log('wczytywanie obrazka...');
    updateMeme(canvas,picture,textTop.value,textBottom.value);
    });
    downloadButton.style.display='block';
});


//na jakąkolwiek zmianę w inpucie tekstu górnego odświeżamy obrazek w canvasie
textTop.addEventListener("change", function(){

  updateMeme(canvas, picture, textTop.value,textBottom.value);
});

//na jakąkolwiek zmianę w inpucie tekstu dolnego odświeżamy picture w canvasie
textBottom.addEventListener("change", function(){

  updateMeme(canvas, picture, textTop.value,textBottom.value);
});

//funckja odpowiedzialna za ładowanie obrazka w canvasie oraz dodowanie napisu górnego i dolnego

  function updateMeme(canvas, picture,textTop,textBottom) {
  //ustawiamy kontekst renderowania w canvasie w naszym przypadku będzie to 2D
  const ctx = canvas.getContext("2d");
  //szerokość i wysokość canvy ustawiamy na parametry obrazka

//wgrywanie małych obrazków zakończy się pikselozą
  const canvasWidth = picture.width;
  const canvasHeight = picture.height;
  //Wielkość czcionki będzie zależna od szerokośći obrazka jeśli chcemy zmienić to w tym miejscu można edytować wartosć
  // Math.floor zaokrągla do najmniejszej lub największej liczby całkowitej

  const fontSize = Math.floor(canvasWidth / 20);
  //odstępy napisów od górnej i dolenej krawędzi zdjęcia im mniejsza wartość tym napisy będą bliżej środka
  const offsetY = canvasHeight / 25;

    //ustawiamy szerokść i wysokość naszego płótna na wymaery obrazka
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  //metoda ta rysyuje obrazek w canvasie kordy 0 , 0 wskazują miesce rozpoczęcia rysowania lewy - górny róg canvasu
  ctx.drawImage(picture, 0, 0);


  // Przygotowanie tekstu  https://www.w3schools.com/tags/ref_canvas.asp

    //kolor obramowań liter
  ctx.strokeStyle = "black";
    //szerokość obramowańa liter
  ctx.lineWidth = Math.floor(fontSize / 4);
    //kolor wypełnienia litery
  ctx.fillStyle = "white";
    //wyśrodkowanie tesktu
  ctx.textAlign = "center";
    //zaokrąglenie obramowania
  ctx.lineJoin = "round";
  ctx.font = `${fontSize}px Lato`;


  //przygotowanie górnego tekstu
  //ustawiamy linię bazową od której zaczynamy rysować tekst
  ctx.textBaseline = "top";
    //rysujemy tekst bez wypełnienia
  ctx.strokeText(textTop, canvasWidth / 2, offsetY);
    //dodajemy wypełnienie
  ctx.fillText(textTop, canvasWidth / 2, offsetY);



    // przygotowanie dolnego tekstu
  ctx.textBaseline = "bottom";
  ctx.strokeText(textBottom, canvasWidth / 2, canvasHeight - offsetY);
  ctx.fillText(textBottom, canvasWidth / 2, canvasHeight - offsetY);

}


//OPCJONALNIE przycisk do pobierania obrazka

// Konwertujemy canvas do obrazka po klknięciu przycisku pobierz
downloadButton.addEventListener("click", function() {

    const dataURL = canvas.toDataURL("image/jpeg");

   //tworzymy nowy znacznik <a> z ustawioną ścieżką do naszego obrazka,
    const a = document.createElement('a');
    a.href = dataURL;
  //ustawiamy atrybut download wraz z nazwą pobranego pliku
    a.download = 'meme.jpeg';
  //wywołujemy metodę klik na nowo utworzonym elemencie w efekcie zdjęcie pobierze się automatycznie
    a.click();
});